Vue動畫--同時使用過渡和動畫
阿新 • • 發佈：2018-11-08
code：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue中同時使用過渡和動畫</title> <script type="text/javascript" src="js/vue.js" ></script> <link rel="stylesheet" href="css/animate.css" /> <style> .fade-enter,.fade-leave-to{ opacity: 0; } .fade-enter-active,.fade-leave-active{ transition: opacity 3s; } </style> </head> <body> <div id="root"> <!--appear 自定義--> <!--appear 定義重新整理頁面的動畫--> <!--:duration="5000" 自定義時間長短，直接寫時間--> <transition :duration="{enter:5000,leave:3000}" name="fade" enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear appear-active-class="animated swing" > <div v-if="show">hello world</div> </transition> <button @click="handleClick">切換</button> </div> <script> new Vue({ el:"#root", data:{ show:true }, methods:{ handleClick(){ this.show=!this.show } } }) </script> </body> </html>