Vue基础进阶之过渡效果

进入/离开过渡效果：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

Vue基础进阶之过渡效果

示例：

初始加载页面：

Vue基础进阶之过渡效果

由图像效果可知，点击显示与隐藏按钮，盒子的出现的效果并没有任何的过渡，显得比较死板：

初始代码：

 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             width: 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>

初始效果代码