animate.css动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../js/vue.js"></script> 7 <link rel="stylesheet" href="../css/animate.min.css"> 8 </head> 9 <body> 10 <div id="app" class="animated"> 11 <button @click="change">切换</button> 12 <transition name="fade" 13 appear 14 enter-active-class="animated bounceIn" 15 leave-active-class="animated bounceOut" 16 appear-active-class="animated bounceIn" > 17 <div v-show="show">hello</div> 18 </transition> 19 </div> 20 <script> 21 var vm = new Vue({ 22 el: "#app", 23 data: { 24 show: true 25 }, 26 methods: { 27 change: function () { 28 this.show = !this.show; 29 } 30 } 31 }); 32 </script> 33 </body> 34 </html>