Vue过渡与动画
1.css过渡
css中的过渡呈现的是一种过渡过程，简单来说就是一种动画转换过程。
1.1 css过渡的用法
过渡系统是Vue为DOM动画效果提供的一种特性，它能从DOM中插入、移除时触发css过渡和动画；也就是说，在DOM发生变化时，为其添加特定的class类名。
几种过渡元素
将需要过渡效果的元素放在标签中，在style标签中添加.v-xxx
- V-enter：定义进入过渡的开始状态，在元素被插入前生效，在元素被插入后的下一帧移除。
- v-enter-activate：定义进入过渡生效时的状态，这个类可以被用来定义进入过渡的过程时间、延迟和曲线函数，在元素被插入前生效，在过渡完成后移除。
- v-enter-to：定义进入过渡的结束状态，v-enter被移除时生效，在过渡完成时移除。
- v-leave：定义离开过渡的开始状态。
- v-leave-activate：定义离开过渡生效时的状态。
- v-leave-to：定义离开过渡的结束状态。
2.多个元素过渡
过渡模式分为两种：
out-in模式：当前元素先进行过渡，完成后新元素过渡进入
in-out模式：新元素先进行过渡，完成后当前元素过渡离开
<transition name="xxx" mode="out-in"></transition>
3.动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中同时使用过渡和动画</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css"> <style> .fade-enter, .fade-leave-to{ opacity:0; } .fade-enter-activate, .fade-leave-activate{ transition:opacity 3s; } </style> </head> <body> <div id="app"> <transition type="transition" name="fade" appear enter-active-class="animated swing fade-enter-activate" leave-active-class="animated shake fade-leave-activate" appear-active-class="animated swing"> <div v-if="show">Hi Shelgi</div> </transition> <button @click="Click">点点我</button> </div> <script> var vm=new Vue({ el:"#app", data: { show: true, }, methods:{ Click:function(){ this.show=!this.show } } }) </script> </body> </html> 复制代码
点击就会看到过渡动画
当然可以依赖css动画库，也能依赖js动画库
- keyframes：css的动画库
- Animate.css：css的动画库
- Velocity.js：js的动画库
总结
过渡动画实现的三种方式是：
- 使用Vue的标签结合css样式完成动画
- 利用Animate.css结合实现动画
- 利用Vue中钩子函数实现动画
