Vue之animate

1、非列表的动画

　　将需要进行动画的元素用transition 包裹起来

　　在style里进行动画设置

　　进入的时候动画：v-enter{//动画的开始  transform:...}、v-enter-active{  //动画的过渡transition:...}、v-active-to{// 动画的结束transform:....}   

　　离开的时候的动画：v-leave{//动画的开始  transform:...}、v-leave-active{  //动画的过渡transition:...}、v-leave-to{// 动画的结束transform:....}   

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title></title>
 9     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10     <style>
11         .v-enter {
12             opacity: 0;
13             transform: translate(-100%);
14         }
15 
16         .v-enter-active,
17         .v-leave-active {
18             transition: all 2s ease;
19         }
20 
21         .v-enter-to,
22         .v-leave {
23             opacity: 1;
24             transform: translate(0);
25         }
26 
27         .v-leave-to {
28             opacity: 0;
29             transform: translate(100%);
30         }
31 
32         /* 王者的 */
33         .wangzhe-enter {
34             opacity: 0;
35             transform: translate(100%);
36         }
37 
38         .wangzhe-enter-active,
39         .wangzhee-leave-active {
40             transition: all 2s ease;
41         }
42 
43         .wangzhe-enter-to,
44         .wangzhe-leave {
45             opacity: 1;
46             transform: translate(0);
47         }
48 
49         .wangzhe-leave-to {
50             opacity: 0;
51             transform: translate(-50%);
52         }
53     </style>
54 </head>
55 
56 <body>
57     <div id='app'>
58 
59         <transition appear name='wangzhe'>
60             <div v-show="tflag">欢迎来到王者荣耀</div>
61         </transition>
62         <button @click="tflag=!tflag">切换</button>
63 
64         <!-- 1、appear  让一上来就有动画效果 -->
65         <transition appear>
66             <div v-show="flag">欢迎来到召唤者峡谷</div>
67         </transition>
68         <button @click="flag=!flag">切换</button>
69     </div>
70     <script>
71         const vm = new Vue({
72             el: '#app',
73             data: {
74                 flag: true,
75                 tflag: true
76             },
77             methods: {
78             }
79         })
80     </script>
81 </body>
82 
83 </html>

 

 

2、列表的动画

　　将元素用 transition-group包裹起来

　　style一样的设置

 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>列表</title>
 9     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10     <style>
11         ul {
12             margin: 200px;
13         }
14 
15         li {
16             cursor: pointer;
17         }
18 
19         .v-enter,
20         .v-leave-to {
21             opacity: 0;
22             transform: translateY(100%);
23         }
24 
25         .v-enter-active {
26             transition: all 2s ease;
27         }
28 
29         .v-enter-to,
30         .v-leave {
31             transform: translateY(0);
32         }
33 
34         .v-leave-active {
35             position: absolute;
36         }
37 
38         .v-move {
39             transition: all 2s ease;
40         }
41     </style>
42 </head>
43 
44 <body>
45     <div id='app'>
46 
47 
48         <transition-group tag="ul" appear>
49             <li v-for="(item,index) in list" :key="item.id" @click="del(index)">
50                 {{item.name}}
51             </li>
52         </transition-group>
53     </div>
54     <script>
55         const vm = new Vue({
56             el: '#app',
57             data: {
58                 list: [
59                     { id: 1, name: "牧马人" },
60                     { id: 2, name: "北极光" },
61                     { id: 3, name: "大G" },
62                     { id: 4, name: "丰田" },
63                 ]
64             },
65             methods: {
66                 del(index) {
67                     console.log(index);
68                     this.list.splice(index, 1)
69                 }
70             }
71         })
72     </script>
73 </body>
74 
75 </html>

 

添加了 v-move{}

 v-leave-active{position:absolute}    实现删除的时候的平稳效果

3、第三方css动画库

https://animate.style/

使用：

　　enter-active-class 以及 leave-active-class 中要加上animate_animated  才行

　　duration 动画激活的时长

 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title></title>
 9     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" />
11 </head>
12 
13 <body>
14     <div id='app'>
15 
16         <transition appear enter-active-class="animate__animated animate__lightSpeedInLeft"
17             leave-active-class="animate__animated animate__rotateOutDownRight" :duration={enter:2000,leave:2000}>
18             <div v-show="flag">欢迎来到召唤者峡谷</div>
19         </transition>
20         <button @click="flag=!flag">切换</button>
21     </div>
22     <script>
23         const vm = new Vue({
24             el: '#app',
25             data: {
26                 flag: true
27             },
28             methods: {
29             }
30         })
31     </script>
32 </body>
33 
34 </html>

使用步骤
　　1、引入  css
　　2、enter-active-class=" "
   　　 leave-active-class=""
　　　使用的时候加上 animate_animated
　　
　　3、duration 指定动画激活的时长
　　duration="1000"
　　:duration="{enter:3000,leave:1000}"

posted @ 2020-09-08 22:04  赛德·乌漆嘛黑  阅读(378)  评论(0)  编辑  收藏  举报