### 彪哥

爱好前端

- 基础

- 组件

- 过渡&动画

  - transition过渡&动画
  - 使用animate库
    - 自定义过渡类名
    - 使用Animate.css库
    - Demo
  - transition-group列表过渡

- 可复用性&组合

- 工具

- 规模化

- Vuex

- 其他

- 《Vue》笔记
- 过渡&动画

heBody
2020-02-17
目录

# 使用animate库

# # 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+) 他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css
  (opens new window)结合使用十分有用。

## # 使用Animate.css库

    <transition
                name="custom-classes-transition"
                enter-active-class="animated tada"
                leave-active-class="animated bounceOutRight"
                >
        <p v-if="show">hello</p>
    </transition>

1
2
3
4
5
6
7

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

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

## # Demo

See the Pen vue中使用animate.css库 by heBody (@heBody) on CodePen.

编辑
(opens new window)
#Vue
上次更新: 2022/12/14, 19:36:42
transition过渡&动画
transition-group列表过渡

← transition过渡&动画 transition-group列表过渡→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式