在Vue中使用animate.css库

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
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 成功带着我老爹再次迷恋了《康熙微服私访记》 每天早上唤醒我的不是起床 而是一阵耐不住的敲门声“宝贝,把康熙给爸爸推...
    叫我万人迷胡阿好阅读 1,742评论 0 0
  • 二月春风; 三月抚柳; 四月雨滴湿润了空气; 你从远方走来, 留下一粒微尘; 你的消失,让五月的花六月便枯竭; 让...
    在线显示i阅读 3,616评论 2 2

友情链接更多精彩内容