首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >使用animate库

使用animate库

作者头像
小小杰啊
发布2022-12-21 21:15:17
发布2022-12-21 21:15:17
1.2K0
举报
文章被收录于专栏:Dimples开发记Dimples开发记

# vue中使用Animate.css库

# 自定义过渡类名

我们可以通过以下 attribute 来自定义过渡类名:

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+) Animate.css (opens new window)结合使用十分有用。

# 使用Animate.css库

代码语言:javascript
复制
<transition
            name="custom-classes-transition"
            enter-active-class="animated tada"
            leave-active-class="animated bounceOutRight"
            >
    <p v-if="show">hello</p>
</transition>

官方文档 (opens new window) 引入Animate.css库,再配合vue的自定义过渡类名,指定enter-active-classleave-active-class的自定义类,两者都要有animated类,用于说明其使用的是Animate.css库,再根据需求定义另外一个动画类名

动画类名:在 Animate官网 (opens new window) 获取。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-02-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # vue中使用Animate.css库
    • # 自定义过渡类名
    • # 使用Animate.css库
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档