Vue_transition动画 

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
 7     <style>
 8         /* 可以设置不同的进入和离开动画 *//* 设置持续时间和动画函数 */
 9         .fade-enter-active,.fade-leave-active{transition: opacity 2s}
10         .fade-enter,.fade-leave-to{opacity: 0}
11         /* Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：
12         进入过程：
13         1、v-enter：定义进入过渡的开始状态
14         2、v-enter-active：定义进入过渡生效时的状态
15         3、v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态
16         离开过程：
17         4、v-leave: 定义离开过渡的开始状态
18         5、v-leave-active：定义离开过渡生效时的状态
19         6、v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态
20          */
21 
22         .slide-fade-enter-active{transition: all .3s ease;}
23         .slide-fade-leave-active{transition: all .8s cubic-bezier(1.0,0.5,0.8,1.0);}
24         .slide-fade-enter,.slide-fade-leave-to{transform: translateX(10px); opacity: 0;}
25 
26         .bounce-enter-active{animation: bounce-in .5s}
27         .bounce-leave-active{animation: bounce-in .5s reverse;}
28         @keyframes bounce-in {
29             0%{transform: scale(0);}
30             50%{transform: scale(1.5);}
31             100%{transform: scale(1);}
32         }
33     </style>
34 </head>
35 <body>
36     <div id="databinding">
37         <button v-on:click = "show = !show">点我</button>
38         <transition name="fade">
39             <p v-show="show" v-bind:style="styleobj">动画实例</p>
40         </transition>
41     </div>
42 
43     <script>
44         var vm = new Vue({
45             el:'#databinding',
46             data:{
47                 show:true,
48                 styleobj:{
49                     fontSize:'30px',
50                     color:'red',
51                 },
52             },
53             methods:{},
54         });
55     </script>
56 
57     <div id="databinding1">
58         <button v-on:click="show=!show">点我CSS过渡</button>
59         <transition name="slide-fade">
60             <p v-if="show">这是一个CSS过渡的测试</p>
61         </transition>
62     </div>
63     <script>
64         new Vue({
65             el:'#databinding1',
66             data: {show: true},
67         });
68     </script>
69 
70     <div id="databinding2">
71         <button v-on:click="show=!show">点我CSS动画</button>
72         <transition name="bounce">
73             <p v-if="show">这是一个CSS动画测试</p>
74         </transition>
75     </div>
76     <script>
77         new Vue({
78             el:'#databinding2',
79             data: {show: true},
80         });
81     </script>
82 
83 </body>
84 </html>

 

posted @ 2020-08-14 17:17  白月如初12138  阅读(397)  评论(0)    收藏  举报