vue-动画（单元素）

一、过渡的简介

Vue在插入、更新或移除DOM的时候，提供多种不同方式的应用过渡效果。本质上还是使用CSS3动画：transition、animation。

二、基本用法

使用transition组件，将要执行动画的元素包含在该组件内。

</transition>

说明：transition组件只能使用单个元素动画。

三、钩子函数

共有8个钩子函数

 1 <transition
 2   v-on:before-enter="beforeEnter"
 3   v-on:enter="enter"
 4   v-on:after-enter="afterEnter"
 5   v-on:enter-cancelled="enterCancelled"
 6 
 7   v-on:before-leave="beforeLeave"
 8   v-on:leave="leave"
 9   v-on:after-leave="afterLeave"
10   v-on:leave-cancelled="leaveCancelled"
11 >
12   <!-- ... -->
13 </transition>

四、结合第三方动画库

结合第三方动画库animate.css一起使用。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>单元素过渡</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8   <style>
 9   /*这里写标签选择器动画的大小可以生效，但是使用di选择器就不生效*/
10       p{
11           width: 200px;
12           height: 200px;
13           background-color: red;
14       }
15 
16       /*过渡效果*/
17       .fade-enter-active,.fade-leave-active{
18           transition: all 3s ease;
19       }
20       /*进入过渡生效时的状态*/
21       .fade-enter-active{    
22           opacity: 1;
23           background-color: green;
24           width: 200px;
25           height: 200px;
26       }
27          /*进入过渡的初始状态*/
28       /*（fade-enter需要放在fade-enter-active的后面）*/
29       .fade-enter{
30           opacity: 1;
31           background-color: gray;
32           width: 100px;
33           height: 100px;
34       }
35       /*离开过渡生效时的状态*/
36       .fade-leave-active{         
37           opacity: 1;
38           background-color: orange;
39           width: 50px;
40           height: 50px;
41       }
42       
43   </style>
44 </head>
45 <body>
46 
47     <div id="hello">
48         <button @click='flag=!flag'>段落显示和隐藏</button>
49         <!-- 动画效果(p段落淡出淡入) -->
50         <transition name='fade' 
51         @before-enter='beforeEnter'
52         @enter='enter'
53         @after-enter='afterEnter'
54         @before-leave='beforeLeave'
55         @leave='leave'
56         @after-leave='afterLeave'
57         >
58             <p v-show='flag' id="dodo">段落</p>
59         </transition>    
60     </div>
61 
62     <script>
63         //vue实例
64         let vm = new Vue({
65             el:'#hello',
66             data:{
67                 flag:false
68             },
69             methods:{
70                 beforeEnter(){
71                     alert('动画进入之前执行的函数');
72                 },
73                 enter(){
74                     alert('动画进入执行的函数');
75                 },
76                 afterEnter(){
77                     alert('动画进入之后执行的函数');
78                 },
79                 beforeLeave(){
80                     alert('动画离开之前执行的函数');
81                 },
82                 leave(){
83                     alert('动画离开执行的函数');
84                 },
85                 afterLeave(){
86                     alert('动画离开之后执行的函数');
87                 },
88             }
89         });
90     </script>
91 </body>
92 </html>

vue-动画（单元素）

推荐阅读