1.引用Animate.css
<link rel="stylesheet" href="./lib/animate.css">
2、使用Animate.css类时,需要为类 enter-active-class 和 leave-active-class 设置进入和离开的类,且加基类animated,否者不起作用
<transition
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
3、初次进入页面就显示动画效果,使用 appear及appear-active-class 来实现
<transition
appear
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
appear-active-class="animated tada"
>
<p v-if="show">hello</p>
</transition>
4、显性的过渡持续时间
<transition :duration="1000">...</transition>
也可以定制进入和移出的持续时间:
<transition :duration="{ enter: 500, leave: 800 }">...</transition>