Vue系列之 => 动画

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>vue动画</title>
 8     <script src="./lib/jquery2.1.4.min.js"></script>
 9     <script src="./lib/Vue2.5.17.js"></script>
10     <!-- 2，自定义两组样式，来控制tranition内部的元素实现动画 -->
11     <style>
12         /* v-enter 是进入之前，元素的起始状态，此时还没有开始进入动画 */
13         /* v-leave-to 是动画离开之后，离开的终止状态，此时元素动画已经结束 */
14         .v-enter,.v-leave-to{
15             opacity: 0;
16             transform:translateX(150px);
17         }
18         /* v-enter-active 入场动画的时间段 */
19         /* v-leave-active 离场动画时间段*/
20         .v-enter-active,.v-leave-active{
21             transition: all 0.8s ease;
22         }
23         /* 另外一组 算定义v-前缀   toptodown */ 
24         .toptodown-enter,.toptodown-leave-to{
25             opacity: 0;
26             transform:translateY(150px);
27         }
28         .toptodown-enter-active,.toptodown-leave-active{
29             transition: all 0.8s ease;
30         }
31     </style>
32 </head>
33 <body>
34     <!-- <div id="app">
35         <input type="button" value="toggle" @click="flag=!flag">
36         <h3 v-if="flag">这是一个h3</h3>
37     </div> -->
38     <div id="app">
39         <input type="button" value="toggle" @click="flag=!flag">
40         <!-- 1，使用transition元素，把需要被动画控制的元素包裹 -->
41         <!-- transition元素是vue官网提供的 -->
42         <transition>
43             <h3 v-if="flag">这是一个h3</h3>
44         </transition>
45         <div class="a">
46             <input type="button" value="toggle2" @click="flag2=!flag2">
47             <!-- 此处算定义transition name属性值为toptodown -->
48             <transition name="toptodown">
49                 <h4 v-if="flag2">这是一个h4</h4>
50             </transition>
51         </div>
52     </div>
53     <script>
54         // new的vue实例，会控制这个元素
55         var vm = new Vue({
56             el: '#app',
57             data: {
58                 flag: false,
59                 flag2: false
60             },
61             methods: { }
62         });
63     </script>
64 </body>
65 </html>
猜你喜欢
