美文网首页Vue学习
在Vue中使用animate.css库

在Vue中使用animate.css库

作者: klmhly | 来源:发表于2018-07-09 20:27 被阅读108次

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

相关文章

网友评论

    本文标题:在Vue中使用animate.css库

    本文链接:https://www.haomeiwen.com/subject/vvotpftx.html