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 </head> 8 <body> 9 <div id="app"> 10 <transition 11 name="fade" 12 enter-active-class="animated swing" 13 leave-active-class="animated shake"> 14 <div v-if="show">hello world</div> 15 </transition> 16 <button @click="handleBtnClick">change</button> 17 </div> 18 19 20 <!-- 开发环境版本，包含了用帮助的命令行警告 --> 21 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 22 <script type="text/javascript"> 23 24 var app = new Vue({ 25 el: '#app', 26 data: { 27 show: true 28 }, 29 methods: { 30 handleBtnClick: function() { 31 this.show = !this.show; 32 } 33 } 34 }) 35 36 </script> 37 </body> 38 </html>
引入animate.css文件
在tranisition标签里面添加enter-active-class，leave-active-class，这里面一定要添加animated这个类