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>