Vue学习

在Vue中使用animate.css库

2018-07-09  本文已影响108人  klmhly

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>

点击切换按钮的效果图如下:


GIF.gif
上一篇下一篇

猜你喜欢

热点阅读