进入/离开过渡效果:Vue在插入、更新或移除DOM时,可以设置一些动画效果;
如何使用过渡效果:利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住,然后书写对应的样式;
过渡的类名:过渡效果的样式是类样式,在进入/离开的过渡中有6个类样式的切换,分别是:
v-enter:定义进入过渡的开始状态;
v-enter-active:定义进入过渡生效状态,在这里可以定义进入过渡的时间、延迟、曲线函数等;
v-enter-to:定义进入过渡结束状态;
v-leave:定义离开过渡的开始状态;
v-leave-active:定义离开过渡生效状态,在这里可以定义离开过渡的时间、延迟、曲线函数等;
v-leave-to:定义离开过渡结束状态;
注意:在<transition name='fade'>中如果指定了name属性,过渡类名的v-要替换成name属性值;例如:fade-enter
示例:
初始加载页面:
由图像效果可知,点击显示与隐藏按钮,盒子的出现的效果并没有任何的过渡,显得比较死板:
初始代码:

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>12_过渡效果</title> 6 <script type="text/javascript" src="../js/vue.js" ></script> 7 <style> 8 9 .mybtn{ 10 margin: 0 auto; 11 100px; 12 height: 100px; 13 background-color: red; 14 } 15 16 </style> 17 18 </head> 19 <body> 20 <div> 21 22 23 <button @click="flag=!flag">显示/隐藏</button> 24 <div v-show="flag" class="mybtn"></div> 25 26 27 28 </div> 29 </body> 30 31 <script> 32 33 34 35 36 37 let vm= new Vue({ 38 data:{ 39 40 flag:false 41 42 } 43 44 }).$mount('div'); 45 46 47 48 49 </script> 50 </html>
实现一种渐隐渐现的效果:
重点使用了transition的组件,以及修改了,离开时的样式和出现的样式:
<div> <button @click="flag=!flag">显示/隐藏</button> <transition name='fade'> <div v-show="flag" class="mybtn"></div> </transition> </div>
样式:
<style> .mybtn{ margin: 0 auto; 100px; height: 100px; background-color: red; } .fade-enter-active,.fade-leave-active{ transition: all 2s; } .fade-enter{ opacity: 0; } .fade-enter-to{ opacity: 1; } .fade-leave{ opacity: 1; } .fade-leave-to{ opacity: 0; } </style>
实现进入、离开过渡效果:
样式:
<style> .mybtn{ 100px; height: 100px; background-color: red; transform: translateX(50px); } .fade-enter-active,.fade-leave-active{ transition: all 2s; } .fade-enter{ opacity: 0; transform: translateX(0px); } .fade-enter-to{ opacity: 1; transform: translateX(50px); } .fade-leave{ opacity: 1; transform: translateX(50px); } .fade-leave-to{ opacity: 0; transform: translateX(0px); } </style>
实现进入、离开过渡效果总的代码

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>12_过渡效果</title> 6 <script type="text/javascript" src="../js/vue.js" ></script> 7 <style> 8 9 .mybtn{ 10 11 100px; 12 height: 100px; 13 background-color: red; 14 transform: translateX(50px); 15 } 16 .fade-enter-active,.fade-leave-active{ 17 transition: all 2s; 18 19 } 20 .fade-enter{ 21 opacity: 0; 22 transform: translateX(0px); 23 } 24 .fade-enter-to{ 25 opacity: 1; 26 transform: translateX(50px); 27 } 28 .fade-leave{ 29 opacity: 1; 30 transform: translateX(50px); 31 } 32 .fade-leave-to{ 33 opacity: 0; 34 transform: translateX(0px); 35 } 36 37 </style> 38 39 </head> 40 <body> 41 <div> 42 43 44 <button @click="flag=!flag">显示/隐藏</button> 45 <transition name='fade'> 46 <div v-show="flag" class="mybtn"></div> 47 48 </transition> 49 50 </div> 51 </body> 52 53 <script> 54 55 56 57 58 59 let vm= new Vue({ 60 data:{ 61 62 flag:false 63 64 } 65 66 }).$mount('div'); 67 68 69 70 71 </script> 72 </html>
过渡效果使用钩子函数
过渡效果中也提供了对应的钩子函数,这些钩子函数需要在<transition>组件上绑定,然后再实现;
过渡效果的钩子函数有:
@before-enter=“beforeEnter“ :进入过渡运行前
@enter=“enter“ :进入过渡运行时
@after-enter=“afterEnter“ :进入过渡运行后
@enter-cancelled=“enterCancelled“ :进入过渡被打断时
@before-leave=“beforeLeave“ :离开过渡运行前
@leave=“leave“ :离开过渡运行时
@after-leave=“afterLeave“ :离开过渡运行后
@leave-cancelled=“leaveCancelled“ :离开过渡被打断时
详情介绍网址:
https://cn.vuejs.org/v2/guide/transitions.html
实例:
vue代码:
<script> let vm= new Vue({ data:{ flag:false }, methods:{ beforeEnter(){ alert("beforeEnter 进入过渡开始前 " ); }, enter(){ alert("enter 进入过渡状态开始"); }, afterEnter(){ alert("afterEnter 进入过渡状态结束"); }, enterCancelled(){ alert("enterCancelled 进入过渡状态 被打断"); }, beforeLeave(){ alert("beforeLeave 离开过渡开始前 " ); }, leave(){ alert("leave 离开过渡状态开始"); }, afterLeave(){ alert("afterLeave 离开过渡状态结束"); }, leaveCancelled(){ alert("leaveCancelled 离开过渡状态 被打断"); } } // @before-enter="beforeEnter" // @enter="enter" // @after-enter="afterEnter" // @enter-cancelled="enterCancelled" // // @before-leave="beforeLeave" // @leave="leave" // @after-leave="afterLeave" // @leave-cancelled="leaveCancelled" // }).$mount('div'); </script>
HTML代码:
<div> <button @click="flag=!flag">显示/隐藏</button> <transition name='fade' @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled"> <div v-show="flag" class="mybtn"></div> </transition> </div>
使用的样式与进入离开过渡效果一样
实现进入的时候变为green,离开的时候变为红色
修改了vue代码,其余的未修改:
methods:{ beforeEnter(){ // alert("beforeEnter 进入过渡开始前 " ); }, enter(el){ // alert("enter 进入过渡状态开始"); // 延时函数 setTimeout( ()=>{ el.style.backgroundColor='green'; },400); }, afterEnter(){ // alert("afterEnter 进入过渡状态结束"); }, enterCancelled(){ // alert("enterCancelled 进入过渡状态 被打断"); }, beforeLeave(){ // alert("beforeLeave 离开过渡开始前 " ); }, leave(el){ el.style.backgroundColor='red'; // alert("leave 离开过渡状态开始"); }, afterLeave(){ // alert("afterLeave 离开过渡状态结束"); }, leaveCancelled(){ // alert("leaveCancelled 离开过渡状态 被打断"); } }
过渡效果的使用钩子函数总的代码:

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>13_过渡效果的钩子函数</title> 6 <script type="text/javascript" src="../js/vue.js" ></script> 7 <style> 8 9 .mybtn{ 10 11 100px; 12 height: 100px; 13 background-color: red; 14 transform: translateX(50px); 15 } 16 .fade-enter-active,.fade-leave-active{ 17 transition: all 2s; 18 19 } 20 .fade-enter{ 21 opacity: 0; 22 transform: translateX(0px); 23 } 24 .fade-enter-to{ 25 opacity: 1; 26 transform: translateX(50px); 27 } 28 .fade-leave{ 29 opacity: 1; 30 transform: translateX(50px); 31 } 32 .fade-leave-to{ 33 opacity: 0; 34 transform: translateX(0px); 35 } 36 37 </style> 38 39 </head> 40 <body> 41 <div> 42 43 44 <button @click="flag=!flag">显示/隐藏</button> 45 <transition name='fade' 46 @before-enter="beforeEnter" 47 @enter="enter" 48 @after-enter="afterEnter" 49 @enter-cancelled="enterCancelled" 50 51 @before-leave="beforeLeave" 52 @leave="leave" 53 @after-leave="afterLeave" 54 @leave-cancelled="leaveCancelled"> 55 56 57 <div v-show="flag" class="mybtn"></div> 58 59 </transition> 60 61 </div> 62 </body> 63 64 <script> 65 66 67 68 69 70 let vm= new Vue({ 71 data:{ 72 73 flag:false 74 75 }, 76 methods:{ 77 78 beforeEnter(){ 79 // alert("beforeEnter 进入过渡开始前 " ); 80 }, 81 enter(el){ 82 83 // alert("enter 进入过渡状态开始"); 84 // 延时函数 85 setTimeout( ()=>{ 86 el.style.backgroundColor='green'; 87 88 89 },400); 90 }, 91 92 afterEnter(){ 93 // alert("afterEnter 进入过渡状态结束"); 94 }, 95 enterCancelled(){ 96 97 // alert("enterCancelled 进入过渡状态 被打断"); 98 }, 99 100 101 102 103 beforeLeave(){ 104 // alert("beforeLeave 离开过渡开始前 " ); 105 }, 106 leave(el){ 107 el.style.backgroundColor='red'; 108 109 // alert("leave 离开过渡状态开始"); 110 }, 111 112 afterLeave(){ 113 // alert("afterLeave 离开过渡状态结束"); 114 }, 115 leaveCancelled(){ 116 117 // alert("leaveCancelled 离开过渡状态 被打断"); 118 } 119 } 120 121 122 // @before-enter="beforeEnter" 123 // @enter="enter" 124 // @after-enter="afterEnter" 125 // @enter-cancelled="enterCancelled" 126 // 127 // @before-leave="beforeLeave" 128 // @leave="leave" 129 // @after-leave="afterLeave" 130 // @leave-cancelled="leaveCancelled" 131 // 132 133 134 }).$mount('div'); 135 136 137 138 139 </script> 140 </html>
过渡效果结合Animate的使用
Vue中的过渡效果也可以与其他第三方CSS动画库一起使用,例如Animate.css;
使用第三方动画库我们需要用到自定义过渡类名:
enter-class; enter-active-class; enter-to-class; leave-class; leave-active-class; leave-to-class;
用到的代码:
<link rel="stylesheet" href="../css/animate.css" />
<transition name='fade' enter-to-class='animated zoomlnDown' leave-to-class='animated zoomOutUp' > <div v-show="flag" class="mybtn"></div> </transition>

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>14_过渡效果结合Animate的使用</title> 6 <script type="text/javascript" src="../js/vue.js" ></script> 7 <link rel="stylesheet" href="../css/animate.css" /> 8 <style> 9 10 .mybtn{ 11 12 100px; 13 height: 100px; 14 background-color: red; 15 transform: translateX(50px); 16 } 17 .fade-enter-active,.fade-leave-active{ 18 transition: all 2s; 19 20 } 21 .fade-enter{ 22 opacity: 0; 23 transform: translateX(0px); 24 } 25 .fade-enter-to{ 26 opacity: 1; 27 transform: translateX(50px); 28 } 29 .fade-leave{ 30 opacity: 1; 31 transform: translateX(50px); 32 } 33 .fade-leave-to{ 34 opacity: 0; 35 transform: translateX(0px); 36 } 37 38 </style> 39 40 </head> 41 <body> 42 <div> 43 44 45 <button @click="flag=!flag">显示/隐藏</button> 46 <transition name='fade' 47 enter-to-class='animated zoomlnDown' 48 49 leave-to-class='animated zoomOutUp' 50 51 > 52 <div v-show="flag" class="mybtn"></div> 53 54 </transition> 55 56 </div> 57 </body> 58 59 <script> 60 61 62 63 64 65 let vm= new Vue({ 66 data:{ 67 68 flag:false 69 70 } 71 72 }).$mount('div'); 73 74 75 76 77 </script> 78 </html>