VUE之过渡+动画
（1）页面初始化渲染动画 （2）transition过渡+@keyframes动画 （3）过渡&&动画时长控制—type属性 （4）自定义时长
页面初始化渲染动画
目前为止，已经结合animated.css动画库实现了@keyframes类型动画切换效果。
如果想在页面初始化时渲染动画效果，此时需要用到appear呈现属性和appear-active-class呈现过渡属性，语法如下
过渡+动画
如果想在元素过渡的同时添加动画效果，此时又需要用到enter-active-class和leave-active-class属性
步骤：
1、添加过渡类名+动画名，这里为了方便查看效果，我将动画改为swing抖动，如下所示
2、设置transition过渡属性值
测试后发现此时便可以实现过渡+动画同时作用与指定元素
时间BUG：
目前为止，过渡时间与动画@keyframes类型时间还不一致，这里过渡时间为3s，查看源码后发现动画库的延时为1秒 如果时间不进行统一，可能导致不可预测的bug，影响vue项目性能，所以需要统一时间
过渡时长type属性
一般为了效果执行完毕，时长以较长的为准，所以这里以过渡时长transition为准，此时需要添加type属性，语法如下
（1）type=”transition”
（1）type=”transition”以过渡时长为准，测试如下
动画时长type属性
除此之外，也可以以@keyframes动画时长为准，语法如下 （2）type=”animation”
验证方法和之前类似，控制台检测即可。
自定义时长
除了使用transition标签元素的type属性去指定时长外，也可以自定义时长，此时需要用到duration延迟属性，如法如下 入场时长+出场时长 除了统一设定时长外，也可以分开设置入场+出场时长，如下所示
注意：duration延时属性，如果想识别后面的表达式，需要利用v-bind动态绑定该属性，否则会报错。
以下为案例源码！！：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
.demo{
width: 200px;
height: 200px;
background: red;
}
.demo1{
width: 200px;
height: 200px;
background: green;
}
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity 3s;
}
.fade-enter-to,.fade-leave{
opacity: 1;
}
</style>
<link rel="stylesheet" type="text/css" href="./animate.min.css">
<script type="text/javascript" src="./vue-2.6.9.min.js"></script>
</head>
<body>
<div id="root">
<transition
v-bind:duration="{enter:3000,leave:2000}"
type="animation"
appear
appear-active-class="animated swing"
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated swing fade-leave-active"
name="fade">
<div class="demo" v-show="status"></div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script type="text/javascript">
var root = new Vue({
el:'#root',
data:{
status:true
},
methods:{
handleClick(){
this.status = !this.status;
}
}
})
</script>
</body>
</html>
如有问题或者疑问请留言联系小编！！！！
感谢来访！！！！
