1. 前提工作
@ 首先要在官网下载animate.css
的文件:链接地址(https://daneden.github.io/animate.css)
@ 然后将该文件通过link方式引入到html或者vue页面
2. 自定义过渡类名
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
3. 具体实现
# 要在transition
标签中自定义过渡类名
# 新定义的类名要包含 animated 动画名
<transition
enter-active-class = "animated swing" //自定义过渡类名,且新定义的类名要包含 【animated 动画名】,这里动画名是【swing】
leave-active-class = "animated shake" //自定义过渡类名,且新定义的类名要包含 【animated 动画名】,这里动画名是【shake】
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
点击切换按钮的效果图如下: