<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用animate.js</title> <script src="../js/vue.js"></script> <!--animate,js官网:https://daneden.github.io/animate.css/--> <link rel="stylesheet" type="text/css" href="../css/animate.css"> <style> @keyframes bounce-in { 0%{ transform: scale(0); } 50%{ transform: scale(1.5); } 100%{ transform: scale(1); } } .active{ transform-origin: left center; animation: bounce-in 1s; } .leave{ transform-origin: left center; animation: bounce-in 1s reverse; } </style> </head> <body> <div id="app"> <!--自定义过渡类名 enter-class enter-active-class enter-to-class (2.1.8+) leave-class leave-active-class leave-to-class (2.1.8+) --> <button @click="btnClick">change</button> <transition name="fade" enter-active-class="active" leave-active-class="leave" > <div v-if="show">hello</div> </transition> <hr> <transition name="fade2" enter-active-class="animated swing" leave-active-class="animated shake" > <div v-if="show">hello</div> </transition> </div> <script> vm = new Vue({ el: '#app', data: { show:true }, methods:{ btnClick:function () { this.show = !this.show } } }) </script> </body> </html>