<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用animate.css库,同时使用过度和动画</title> <script src="vue.js"></script> <link rel="stylesheet" href="./animate.css"> <style> .fade-enter, .fade-leave{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition:opacity 2s; } </style> </head> <body> <div id="root"> <transition :duration="{enter:3000,leave:3000}" 设置动画入场和退场的时间 name="fade" appear 使打开页面时就有动画 appear-active-class="animated swing" enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" > <div v-if="show">用transition标签进行包裹</div> </transition> <button @click="handleClick">change</button> </div> <script> var vm=new Vue({ el:"#root", data:{ show:true }, methods:{ handleClick:function(){ this.show = !this.show } } }) </script> </body> </html>
使用animate.css库,同时使用过度和动画
猜你喜欢
转载自blog.csdn.net/qq_19168521/article/details/80931205
今日推荐
周排行