Vue中的动画特效

最新推荐文章于 2024-05-14 11:22:56 发布

sxs7970

最新推荐文章于 2024-05-14 11:22:56 发布

阅读量660

点赞数

分类专栏：前端 Vue.js 文章标签： Vue中动画特效 Vue中的动画/过渡动画/过渡 Vue中动画钩子函数

本文链接：https://blog.csdn.net/sxs7970/article/details/88134669

版权

前端同时被 2 个专栏收录

132 篇文章 2 订阅

订阅专栏

Vue.js

37 篇文章 0 订阅

订阅专栏

文章目录

Vue中的css动画原理

vue中的动画原理其实就是，css3中的transition属性。

当一个元素被transition包裹的时候，vue会自动分析一下元素的css样式，然后构建一个动画的流程，在动画即将被执行的一瞬间，他会往内部的div上增加两个class名字，分别是fade-enter,和fade-enter-active。当动画第一帧执行结束之后，transition这个标签vue分析过，知道他是一个动画效果的时候，vue会在动画运行到第二帧的时候，帮助你干两件事情，这个时刻vue会把之前添加的fade-enter这个class给去掉，然后增加一个fade-enter-to这样的一个class的名字。接着动画会继续执行，执行到结束的这一瞬间，vue会干一件事情，他会把之前添加的fade-enter-active和fade-enter-to这两个Class给去除掉。

例子：
注意看代码中的注释！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画</title>
    <script src="../lib/vue.js"></script>
</head>
<!-- 2.自定义两组样式，来控制 transition 内部的元素实现动画 -->
<style>
    /* v-enter 【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入 */
    /* v-leave-to 【这是个时间点】 是动画离开之后，离开的终止状态，此时，元素动画已经结束 */
    .v-enter,.v-leave-to{
        opacity: 0;
        transform: translateX(250px);
    }

    /* v-enter-active 【入场动画的时间段】 */
    /* v-leave-active 【离场动画的时间段】 */
    .v-enter-active,.v-leave-active{
        transition: all 1s ease;
    }
</style>

<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求：点击按钮,让h3显示，再点击，隐藏 -->
        <!-- 1.使用 transition 元素把需要被动画控制的元素，包括起来 -->
        <!-- transition 元素，是 Vue 官方提供的 -->
        <transition>
            <h3 v-if="flag">这是一个h3</h3>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        })
    </script>

</body>

</html>

在Vue中修改v-前缀

对于这些过渡中切换的类名来说，如果你使用一个没有名字的<transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my"> ，那么 v-enter 会替换成 my-enter。

例子：
注意看代码中的注释！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画</title>
    <script src="../lib/vue.js"></script>
</head>
<!-- 2.自定义两组样式，来控制 transition 内部的元素实现动画 -->
<style>

    /* 自定义前缀的动画类 */
    .my-enter,.my-leave-to{
        opacity: 0;
        transform: translateY(100px);
    }

    /* my-enter-active 【入场动画的时间段】 */
    /* my-leave-active 【离场动画的时间段】 */
    .my-enter-active,.my-leave-active{
        transition: all 1s ease;
    }
</style>

<body>
    <div id="app">
        <!-- 需求：点击按钮,让h3显示，再点击，隐藏 -->
        <!-- 1.使用 transition 元素把需要被动画控制的元素，包括起来 -->
        <!-- transition 元素，是 Vue 官方提供的 -->
        
        <input type="button" value="toggle2" @click="flag2=!flag2">
        <transition name="my">
            <h2 v-if="flag2">这是一个h2</h2>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag2: false
            },
            methods: {}
        })
    </script>

</body>

</html>

在Vue中使用第三方类库animate.css

下载 animate.css 并引入

例子：
注意看代码中的注释！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
</head>
<!-- 入场 bounceIn -->
<!-- 离场 bounceOut -->

<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 需求：点击按钮,让h3显示，再点击，隐藏 -->

        <!-- 必须加animated 这个基本的类 ,后边的那些类名效果，从animate.css官网找就行了-->
        <!-- 使用 ：duration="毫秒值" 来设置 入场 或者 离场 时候的动画时长 -->
        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="300">
            <h3 v-if="flag">这是一个h3</h3>
        </transition>
        
        <!-- 第二种写法 -->
        <!-- 使用  :duration="{enter:500,leave:1000}" 来分别设置 入场时长 和 离场时长 -->
        <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:500,leave:1000}">
            <h3 v-if="flag" class="animated">这是一个h3</h3>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        })
    </script>

</body>

</html>

在Vue中动画特效的钩子函数

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>

注意：这里都是通过 v-on: 绑定的事件函数。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>钩子函数</title>
    <script src="../lib/vue.js"></script>
</head>
<style>
.box{
	width:100px;
	height:100px;
	background-color:red;
}
</style>
<body>
    <div id="app">
        <input type="button" value="加入" @click="flag=!flag">

        <transition v-on:before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div v-show="flag" class="box"></div>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                // 注意:动画钩子函数的第一个参数：el ，表示 要执行动画的那个DOM元素
                // 是个原生的 JS DOM对象。（大家可以认为，el 是通过 document.getElementById('') 方式获取得到的原生JS DOM对象）

                beforeEnter: function (el) {
                    // before-enter 表示动画入场之前，此时，动画尚未开始，可以在 before-enter中，设置元素
                    // 开始动画之前的起始样式

                },
                enter: function (el, done) {
                    // 下边这句话没有实际的作用，但是如果不写，出不来动画效果
                    // 可以认为 el.offsetWidth 会强制动画刷新(有width 就有height、left，只要跟offset有关都可以)
                    el.offsetWidth;
                    // enter 表示动画，开始之后的样式，这里可以设置小球完成动画之后的结束状态


                    // 这里的done 其实就是 after-enter函数，也就是说：done 是 after-enter函数的引用（回调相当于引用执行after-enter函数）
                    done()
                },
                afterEnter(el) {
                    // 动画完成之后，会调用的 after-enter 函数
                    this.flag = !this.flag; //做完，动画没有立即消失，如果立即消失，必须在enter函数中，加done参数
                }
            }
        })
    </script>
</body>

</html>

在下一遍文章中做一个案例，具体用一下钩子函数。有兴趣的可以看一下。

在Vue中列表过渡动画

在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的。不能使用
transition 包裹，需要使用 transition-group
如果要为 v-for 循环创建的元素设置动画，必须为每一个元素设置 :key 属性
给transition-group 添加 appear 属性，实现页面刚渲染出来的时候，入场的时候效果
通过为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素标签，如果不指定 tag 属性，默认渲染为 span 标签

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表动画</title>
    <script src="../lib/vue.js"></script>
</head>
<style>
    li {
        border: 1px dashed #999;
        margin:5px;
        line-height: 3;
        font-size: 12px;
        /* 设置width：100% 因为离开的时候，定位绝对定位，脱离标准文档流，宽度只有内容撑起来 */
        width: 100%;
    }
    li:hover{
       background-color: hotpink; 
       transition: all .8s ease-in;
    }

    .v-enter,.v-leave-to{
        opacity: 0;
        transform: translateY(80px);
    }
    .v-enter-active,.v-leave-active{
        transition: all 1s ease;;
    }

/* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地飘上来的效果 */
    .v-move{
        transition: all .6s ease;
    }
    .v-leave-active{
        position: absolute;
    }
</style>

<body>
    <div id="app">
        <div>
            <label>
                ID:
                <input type="text" v-model="id">
            </label>
            <label>
                Name:
                <input type="text" v-model="name">
            </label>
            <input type="button" value="添加" @click="add">
        </div>

        <!-- <ul> -->
            <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的。不能使用
            transition 包裹，需要使用 transition-group -->
            <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个元素设置 :key 属性 -->
            <!-- 给transition-group 添加 appear 属性，实现页面刚展示出来的时候，入场的时候效果 -->
            <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素标签，
            如果不指定 tag 属性，默认 渲染为 span 标签 -->
            
            <!-- 这里如果不设置 tag 属性，transition-group 会渲染为默认的 span 标签，则代码结构为 ul>span>li ,不符合代码规范-->
            <transition-group appear tag="ul">
                <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                    {{item.id}} ---- {{item.name}}
                </li>
            </transition-group>
        <!-- </ul> -->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [{
                    id: 1,
                    name: '小明'
                }, {
                    id: 2,
                    name: '小红'
                }, {
                    id: 3,
                    name: '小李'
                }, {
                    id: 4,
                    name: '小刘'
                }]
            },
            methods: {
                add() {
                    this.list.push({
                        id: this.id,
                        name: this.name
                    })
                    this.id = this.name = ''
                },
                del(i) {
                    this.list.splice(i, 1);
                }
            }
        });
    </script>
</body>

</html>

sxs7970

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue中的动画特效

文章目录Vue中的css动画原理在Vue中修改v-前缀在Vue中使用第三方类库animate.css在Vue中动画特效的钩子函数在Vue中列表过渡动画Vue中的css动画原理vue中的动画原理其实就是，css3中的transition属性。当一个元素被transition包裹的时候，vue会自动分析一下元素的css样式，然后构建一个动画的流程，在动画即将被执行的一瞬间，他会往内部的di...
复制链接

扫一扫