vue系列教程-08vue的动画和过渡效果
本内容为系列内容，全部内容请看我的vue教程分类
过去都是jquery来做动画比较多吧，这一节就是介绍一下vue的过渡和动画，这需要你具备实现css的基本过渡和动画的能力
vue也可以借助第三方库实现比较复杂的动画，本次只是介绍常用的简单效果，更深的在下次的进阶课程中
vue的过渡效果
这里要先介绍它的原理，也就是不同的阶段给这个节点绑定上不同的class，来看一个动图
大家可以发现在切换显示与隐藏的过程中，这个节点的class出现了变化
这里来一个官方的图
这里可能大家看不懂哈，我们来一个实例，实例化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>
好的看下效果，是可以的
那么这些 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的
通过指定类名来实现使用第三方的动画库
上面虽然使用 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>
看看效果是可以的
这种使用第三方库的方式是不是就非常方便了啊
使用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列表过渡
通过 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>
看看效果吧！可以的
那么更为复杂有趣的动画效果，我会在进阶课程里面讲到
