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>
