vue系列教程-08vue的动画和过渡效果

本内容为系列内容，全部内容请看我的vue教程分类

过去都是jquery来做动画比较多吧，这一节就是介绍一下vue的过渡和动画，这需要你具备实现css的基本过渡和动画的能力

vue也可以借助第三方库实现比较复杂的动画，本次只是介绍常用的简单效果，更深的在下次的进阶课程中

vue的过渡效果

这里要先介绍它的原理，也就是不同的阶段给这个节点绑定上不同的class，来看一个动图

vue教程-lookroot

大家可以发现在切换显示与隐藏的过程中，这个节点的class出现了变化

这里来一个官方的图

vue教程-lookroot

这里可能大家看不懂哈，我们来一个实例，实例化vue，并添加一个 isShow来控制显示与隐藏

<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                isShow: true,
            }
        },
    })
</script>

然后在页面中定义这个按钮并绑定一个点击事件用来切换，transition标签就是vue用来包裹需要执行过渡的节点

<body>
    <div id="app">
        <button v-on:click="isShow = !isShow">
            Toggle
        </button>
        <transition>
            <p v-if="isShow">我变化了</p>
        </transition>
    </div>
</body>

那么这个p标签节点，在切换显示的过程中就会添加上上图的几个 class 我们来写一下，那么不管是显示还是隐藏，我都是改变字体的大小和透明度，方便展示

 <style>
     /* 出现时候的过渡效果 */
     /* 最开始的转态 */
     .v-enter {
         opacity: 0;
     }
     /* 整个执行过程 */
     .v-enter-active {
         transition: all 1s ease;
     }
     /* 最后的样子 */
     .v-enter-to {
         font-size: 64px;
     }
     /* 消失的时候的过渡效果 */
     .v-leave {}
     /* 整个过程中 */
     .v-leave-active {
         transition: all 1s ease;
     }
     /* 最后的样子 */
     .v-leave-to {
         opacity: 0;
         font-size: 64px;
     }
 </style>

好的看下效果，是可以的

vue教程-lookroot

那么这些 class的名字是怎么来的呢？这里的名字都是vue设定好的，当然我们如果修改也是可以的，在下面的动画中会讲到

vue动画

还是使用上面的点击切换和隐藏，我们在页面中新增一个节点，给它用 transition包裹并且 name属性的值为big，这就是给这效果起了名字了，上面提到过 class 的自定义名字就要这样使用

<transition name="big">
    <p v-if="isShow">我变化了</p>
</transition>

然后我们定义css,注意看上面是 v-... 这里就变成 big...了这就是自定义名字的方法，如果你不给这个 transition设置name，默认就是 v-,那么都是transition，vue怎么区别是过渡还是动画的呢？这就是你css怎么写，它会自动识别

.big-enter-active {
    animation: ani1 1s ease;
}
.big-leave-active {
    animation: ani1 1s ease;
}
@keyframes ani1 {
    0% {
        font-size: 24px;
    }
    50% {
        font-size: 80px;
    }
    100% {
        font-size: 24px;
    }
}

看看效果，是ok的

vue教程-lookroot

通过指定类名来实现使用第三方的动画库

上面虽然使用 name来实现了自定义类名，但是如果我们使用第三方的动画库，这个自定义只修改了前缀，肯定是不能满足需求的那么怎么做呢这里以 animate.css为例

首先引入css文件

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

还是使用上面的切换，但是直接在 transition标签中指定不同周期使用的class类名

<transition name="xxx"
 enter-active-class="animated bounceInUp" 
 leave-active-class="animated bounceInDown">
    <p v-if="isShow">我变化了</p>
</transition>

看看效果是可以的

vue教程-lookroot

这种使用第三方库的方式是不是就非常方便了啊

使用JavaScript钩子函数

如果要实现更为复杂的动画，或者咋动画执行完成后触发一些事件，就需要用到JavaScript钩子函数

仍然使用上面的切换，定义一个新的标签，然后在 transition 上直接给不同的周期绑定不同的事件，然后这个绑定一个 css为false，为了避免这个 transition使用上面我们定义的css动画效果

<transition :css="false" 
@before-enter="beforeEnter" 
@enter="enter" 
@after-enter="afterEnter"
>
    <div v-if="isShow">我变化了</div>
</transition>

然后我们写一下这几个方法，记住enter和 leave中要使用 done才会去执行 afterEnter、 afterLeave

methods: {
    // 钩子动画
    beforeEnter(el) {
        el.style.opacity = 0.5
    },
    enter(el, done) {
        el.offsetWidth
        el.style.fontSize = "48px"
        el.style.transition = "all 1s ease"
        // 回调  用于执行afterEnter 
        done()
    },
    afterEnter(el){
        el.style.opacity = 1
    },
},

看看效果，是可以的

vue教程-lookroot

vue列表过渡

通过 v-for渲染出来的数据的过渡效果是有点不一样的，我们来实践一下吧

首先定义一个list

list: [1, 2, 3, 4]

然后我们渲染这个数据，并绑定一个点击事件删除数据

<div v-for="i in list" @click="del(i)" :key="i">{{i}}</div>

写一下这个删除方法

 del(i) {
     this.list = this.list.filter((item) => {
         return item != i;
     })
 },

这个时候，我们用transition-group来包裹这个循环,并且指定一个离开时候的class，这是我们上面引入的第三方动画库类名

<transition-group leave-active-class="animated bounceInDown" >
    <div v-for="i in list" @click="del(i)" :key="i">{{i}}</div>
</transition-group>

看看效果吧！可以的

vue教程-lookroot

那么更为复杂有趣的动画效果，我会在进阶课程里面讲到