vue有意思的图片动画插件direction-reveal

这篇具有很好参考价值的文章主要介绍了vue有意思的图片动画插件direction-reveal。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

功能:操作简单好上头,动画特效很丝滑,有很多种供选择

1.下载插件

npm install direction-reveal --save-dev

2.使用

导入到需要使用动画的单页面

import DirectionReveal from 'direction-reveal';

使用样式

    mounted() {
        this.query();
    },
    methods: {
        query() {
            const directionRevealDemo = DirectionReveal();

            const directionRevealDefault = DirectionReveal({
                selector: '.direction-reveal',
                itemSelector: '.direction-reveal__card',
                animationName: 'swing',
                animationPostfixEnter: 'enter',
                animationPostfixLeave: 'leave',
                enableTouch: true,
                touchThreshold: 250
            });
            // 旋转
            const directionRevealRotate = DirectionReveal({
                selector: '.direction-reveal--demo-rotate',
                itemSelector: '.direction-reveal__card',
                animationName: 'rotate',
                animationPostfixEnter: 'enter',
                animationPostfixLeave: 'leave',
                enableTouch: true,
                touchThreshold: 250
            });
            // 图片翻转
            const directionRevealFlip = DirectionReveal({
                selector: '.direction-reveal--demo-flip',
                animationName: 'flip'
            });
        }
    }

导入css,如果用到了scss就导入scss,用的css就导入.css文件

<style lang="scss" scoped>
@import '/node_modules/direction-reveal/src/styles/direction-reveal.scss';

3.完整代码

<template>
    <div class="content-box">
        <div class="container">
            <div class="direction-reveal direction-reveal--3-grid direction-reveal--demo-swing">
                <a href="#" class="direction-reveal__card">
                    <img src="../../assets/img/img.jpg" alt="Image" class="img-fluid" />
                    <div class="direction-reveal__overlay direction-reveal__anim--enter">
                        <h3 class="direction-reveal__title">Title</h3>
                        <p class="direction-reveal__text">Description text.</p>
                    </div>
                </a>
                <a href="#" class="direction-reveal__card">
                    <img src="../../assets/img/img.jpg" alt="Image" class="img-fluid" />
                    <div class="direction-reveal__overlay direction-reveal__anim--enter">
                        <h3 class="direction-reveal__title">标题内容区域</h3>
                        <p class="direction-reveal__text">Description text.</p>
                    </div>
                </a>
                <a href="#" class="direction-reveal__card">
                    <img src="../../assets/img/img.jpg" alt="Image" class="img-fluid" />
                    <div class="direction-reveal__overlay direction-reveal__anim--enter">
                        <h3 class="direction-reveal__title">Title</h3>
                        <p class="direction-reveal__text">Description text.</p>
                    </div>
                </a>
            </div>
            <!-- 旋转 -->

            <div class="fullwidth">
                <div class="imgbox separator">
                    <h3 class="">旋转</h3>
                    <div class="direction-reveal direction-reveal--3-grid direction-reveal--demo-rotate">
                        <a href="#" class="direction-reveal__card">
                            <img src="../../assets/img/img.jpg" alt="Image" class="direction-reveal__img" />

                            <div class="direction-reveal__overlay direction-reveal__anim--enter">
                                <h3 class="direction-reveal__title">Lorem ipsum</h3>
                                <p class="direction-reveal__text">
                                    内容区域
                                </p>
                            </div>
                        </a>
                        <a href="#" class="direction-reveal__card">
                            <img src="../../assets/img/img.jpg" alt="Image" class="direction-reveal__img" />

                            <div class="direction-reveal__overlay direction-reveal__anim--enter">
                                <h3 class="direction-reveal__title">Lorem ipsum</h3>
                                <p class="direction-reveal__text">
                                    内容区域
                                </p>
                            </div>
                        </a>
                        <a href="#" class="direction-reveal__card">
                            <img src="../../assets/img/img.jpg" alt="Image" class="direction-reveal__img" />

                            <div class="direction-reveal__overlay direction-reveal__anim--enter">
                                <h3 class="direction-reveal__title">Lorem ipsum</h3>
                                <p class="direction-reveal__text">
                                    内容区域
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 图片翻转 -->
            <div class="fullwidth">
                <div class="container separator">
                    <h3 class="">图片翻转</h3>

                    <div class="direction-reveal direction-reveal--3-grid direction-reveal--demo-flip">
                        <a href="#" class="direction-reveal__card">
                            <img src="../../assets/img/img.jpg" alt="Image" class="direction-reveal__anim--leave direction-reveal__img" />

                            <div class="direction-reveal__overlay direction-reveal__anim--enter">
                                <h3 class="direction-reveal__title">Lorem ipsum</h3>
                                <p class="direction-reveal__text">
                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                                    rem aperiam, eaque ipsa quae ab illo inventore eritatis et quasi.
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import DirectionReveal from 'direction-reveal';
export default {
    data() {
        return {};
    },
    mounted() {
        this.query();
    },
    methods: {
        query() {
            const directionRevealDemo = DirectionReveal();

            const directionRevealDefault = DirectionReveal({
                selector: '.direction-reveal',
                itemSelector: '.direction-reveal__card',
                animationName: 'swing',
                animationPostfixEnter: 'enter',
                animationPostfixLeave: 'leave',
                enableTouch: true,
                touchThreshold: 250
            });
            // 旋转
            const directionRevealRotate = DirectionReveal({
                selector: '.direction-reveal--demo-rotate',
                itemSelector: '.direction-reveal__card',
                animationName: 'rotate',
                animationPostfixEnter: 'enter',
                animationPostfixLeave: 'leave',
                enableTouch: true,
                touchThreshold: 250
            });
            // 图片翻转
            const directionRevealFlip = DirectionReveal({
                selector: '.direction-reveal--demo-flip',
                animationName: 'flip'
            });
        }
    }
};
</script>

<style lang="scss" scoped>
@import '/node_modules/direction-reveal/src/styles/direction-reveal.scss';
.container {
    border: 1px solid red;
    // flex-wrap: wrap;
    img {
        width: 100px;
        height: 100px;
    }
    .fullwidth {
        width: 600px;
        img {
            width: 200px;
            height: 200px;
        }
    }
}
</style>

5.效果

vue有意思的图片动画插件direction-reveal,vue,vue-插件,vue.js,前端,javascript

 6.插件地址

https://github.com/NigelOToole/direction-reveal

文章到此结束,希望对你有所帮助~文章来源地址https://www.toymoban.com/news/detail-523473.html

到了这里,关于vue有意思的图片动画插件direction-reveal的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 分享两个有意思的登录界面

    1.带有浮动占位符和灯光按钮的登录界面 先上效果: 代码如下: 2.跳跃的登录字符登陆界面 先上效果: 代码如下:

    2023年04月25日
    浏览(40)
  • 记录-有意思的气泡 Loading 效果

    今日,群友提问,如何实现这么一个 Loading 效果: 这个确实有点意思,但是这是 CSS 能够完成的? 没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们之前的: 使用纯 CSS 实现超酷炫的粘性气泡效果 巧用 C

    2024年02月01日
    浏览(43)
  • 分享一组有意思的按钮设计

    先上效果图: 一共16个,每个都有自己不同的样式和效果,可以用在自己的项目中,提升客户体验~ 再上代码:

    2024年02月04日
    浏览(39)
  • 涨姿势了,有意思的气泡 Loading 效果

    今日,群友提问,如何实现这么一个 Loading 效果: 这个确实有点意思,但是这是 CSS 能够完成的? 没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们之前的: 使用纯 CSS 实现超酷炫的粘性气泡效果 巧用 C

    2023年04月13日
    浏览(44)
  • 第五期:字符串的一些有意思的操作

    PS:每道题解题方法不唯一,欢迎讨论!每道题后都有解析帮助你分析做题,答案在最下面,关注博主每天持续更新。 1. 替换空格 题目描述 请实现一个函数,把字符串 s 中的每个空格替换成\\\"%20\\\"。 示例1: 输入:s = “We are happy.” 输出:“We%20are%20happy.” 示例2: 输入:s =

    2024年02月08日
    浏览(52)
  • 有意思!一个关于 Spring 历史的在线小游戏

    发现 Spring One 的官网上有个好玩的彩蛋,分享给大家! 进到Spring One的官网,可以看到右下角有个类似马里奥游戏中的金币图标。 点击该金币之后,会打开一个新的页面,进入下面这样一个名为:The History Of Spring 的在线小游戏 你可以使用上下左右的方向键来控制Spring的Logo一

    2024年04月27日
    浏览(39)
  • kill 进程时遇到的一件有意思的事情

    一般来讲,我们在 kill 掉一个进程的时候通常有两个选择: 找到进程的 pid 号,然后执行 kill 命令 找到进程的名字,然后执行 pkill 命令 pkill 和 kill 命令都是向指定的进程发送信号,从而完成终结进程的操作,主要区别在于 pkill 命令与 pgrep 配套使用,能够踢出指定终端用户

    2023年04月10日
    浏览(44)
  • 有意思,我的GitHub账号值$23806.2,快来试试你的?

    睡不着,看到一个有意思的网站: Estimate Github Worth Generator 。 它可以用来估算 GitHub 账号的价值。马上试了一下。 我的账号估值: $23806.2 操作很简单,点击Estimate Github Worth Generator,进入网站。 具体如下图: 在唯一的输入框中,输入您的GitHub账号,点击按钮 Generate Worth 按钮

    2024年02月04日
    浏览(50)
  • 码出高效_第一章 | 有意思的二进制表示及运算

    设想有8条电路,每条电路有高电平和低电平两种状态,即就有2 8 =256种不同的信号。假设其表示区间为0~255,最大数即2 8 -1。 那么32条电路能够表示最大数为(2 32 -1)=4294967295,即所谓的32位电路信号。 正负数表示: 上面的8条电路,最左侧一条表示正负:0-整数,1-负数,不

    2024年02月06日
    浏览(36)
  • rollup npm 工具包怎么做点有意思的事情

    一个 NPM 包,帮助数十万程序员提高数十倍效率,难道不开源出来?(一) 首先贴下我们的官网 【预览页】 https://kennana.github.io/toolkit-use/ 我们的推特 【toolkituse】 https://twitter.com/Toolkituse 我们的github 【toolkit-use】 https://github.com/KenNaNa/toolkit-use

    2024年02月16日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包