一、过渡(动画)
1、 简介
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，本质上还是使用CSS3动画：transition、animation
2、 基本用法
1、使用transition组件，将要执行动画的元素包含在该组件内就可以了即 <transition> 运动的元素</transition>
2、 过滤的CSS类名：
1、v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
2、v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
3、v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
4、v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
5、v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
6、v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。
3、示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <script src="js/vue.js"></script> <style> p{ 300px; height: 300px; background-color:red; } .fade-enter-active,.fade-leave-active{//表示渐入和渐出的时候要用什么样的动画效果 transition:all 3s ease; //所有元素 时间 快慢程度 } .fade-enter-active{//渐入 opacity:1; //透明度 300px; height:300px; } .fade-leave-active{//渐出 opacity:0; 50px; height:50px; } /* .fade-enter需要放在.fade-enter-active的后面 */ .fade-enter{ opacity:0; 100px; height: 100px; } </style> </head> <body> <div id="itany"> <button @click="flag=!flag">点我</button> <transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" > <p v-show="flag">网博</p> </transition> </div> <script> var vm=new Vue({ el:'#itany', data:{ flag:false }, methods:{ beforeEnter(el){ // alert('动画进入之前'); }, enter(){ // alert('动画进入'); }, afterEnter(el){ // alert('动画进入之后'); el.style.background='blue'; }, beforeLeave(){ // alert('动画即将之前'); }, leave(){ // alert('动画离开'); }, afterLeave(el){ // alert('动画离开之后'); el.style.background='red'; } } }); </script> </body> </html>
3、动画内的钩子函数
4、结合第三方动画库animate..css一起使用
<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
<p v-show="flag">网博</p>
</transition>
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <link rel="stylesheet" href="css/animate.css"> <script src="js/vue.js"></script> <style> p{ 300px; height: 300px; background-color:red; margin:0 auto; } </style> </head> <body> <div id="itany"> <button @click="flag=!flag">点我</button> <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight"> <p v-show="flag">网博</p> </transition> </div> <script> var vm=new Vue({ el:'#itany', data:{ flag:false } }); </script> </body> </html>
5、多元素动画
<transition-group>