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结合使用十分有用。

使用Animate.css库

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

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

动画类名：在 Animate官网 获取。

Demo

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="xugaoyi" data-slug-hash="JjdXBmy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue中使用animate.css库">
  <span>See the Pen <a href="https://codepen.io/xugaoyi/pen/JjdXBmy">
  vue中使用animate.css库</a> by xugaoyi (<a href="https://codepen.io/xugaoyi">@xugaoyi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>