《Vue》
过渡&动画

使用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 xugaoyi (@xugaoyi) on CodePen.

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