vue 同时使用过渡和动画 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Vue中的动画</title>    
 6         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
 7         <style>
 8             .fade-enter,
 9             .fade-leave-to {
10                 opacity: 0;
11             }
12             .fade-enter-active,
13             .fade-leave-active {
14                 transition: opacity 3s;
15             }
16         </style>
17     </head>
18     <body>    
19         <div id="app">
20             <!--1.设置appear  appear-active-class设置页面初次打开时的动画
21                 2.animated的动画时长为1s, 过渡时长为3s, 
22                 在transition标签里设置type="transition"则以transition的时间为准
23                 3.或者时长自定义：在transition标签设置:duration='10000'，动画时长即为10s,
24                 enter和leave时间可以分开设置:duration='{enter: 5000, leave: 10000}'
25             -->
26             <transition 
27                 name="fade"
28                 appear 
29                 :duration='10000'
30                 enter-active-class="animated swing"
31                 leave-active-class="animated shake"
32                 appear-active-class="animated swing">
33                 <div v-if="show">hello world</div>
34             </transition>
35             <button @click="handleBtnClick">change</button>
36         </div>
37         
38         
39         <!-- 开发环境版本，包含了用帮助的命令行警告 -->
40         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
41         <script type="text/javascript">
42             
43             var app = new Vue({
44                 el: '#app',
45                 data:　{
46                     show: true
47                 },
48                 methods: {
49                     handleBtnClick: function() {
50                         this.show = !this.show;
51                     }
52                 }
53             })
54             
55         </script>
56     </body>
57 </html>

 

posted @ 2018-05-15 16:49  铜镜123  阅读(662)  评论(0)    收藏  举报