Vue C3动画 vue2-animate

Posted 2020-12-07 daniao11417

　　最近写vue的项目，需要添加一个动画，首先想到的就是jQuery中常用的第三方库，animate，但是这个不是能完全兼容的，需要自己做处理。然后就在晚上寻找Vue版本的动画库，然后就找到了这个vue2-animate。网上的教程还是不少的，然后demo能直接运行，但是他们有一点没有写的很明白，就是在添加enter-active-class或leave-active-class属性的时候。官方的文档写了，需要加入-enter/-leave，或者加入In或者Out

请看官方的英文原文：

Animate.css‘s original classnames are supported on enter/leave transitions. So if you‘re going to use Custom Transition Classes, you can either add -enter/-leave to the classes:

1 <transition
2   name="custom-classes-transition"
3   enter-active-class="bounceLeft-enter"
4   leave-active-class="bounceRight-leave"
5 >
6   <p v-if="show">hello</p>
7 </transition>

Or use the regular In/Out syntax:

1 <transition
2   name="bounce"
3   enter-active-class="bounceInLeft"
4   leave-active-class="bounceOutRight"
5 >
6   <p v-if="show">hello</p>
7 </transition>

　　最后说一下他的使用方法，很简单的：

1 (c)npm install --save vue2-animate

然后再你的main.js中添加上css的引入

1 import ‘vue2-animate/dist/vue2-animate.min.css‘

或者官方说了，

require(‘vue2-animate/dist/vue2-animate.min.css‘)

都是可以的，然后，你想要实现动画的元素上面，需要包裹一层 transition 标签。然后再name属性定义是使用具体什么类型的动画，然后enter-active-class和leave-active-class 属性添加对应的动画class名， 记住动画class名，要加上In或者Out

　　下面是常见的动画名称：

Bounce

• bounce
• bounceDown
• bounceLeft
• bounceRight
• bounceUp

Fade

• fade
• fadeDown
• fadeDownBig
• fadeLeft
• fadeLeftBig
• fadeRight
• fadeRightBig
• fadeUp
• fadeUpBig

Flip

• flip
• flipX
• flipY

Rotate

• rotate
• rotateDownLeft
• rotateDownRight
• rotateUpLeft
• rotateUpRight

Slide

• slideDown
• slideLeft
• slideRight
• slideUp

Zoom

• zoom
• zoomDown
• zoomLeft
• zoomRight
• zoomUp

LightSpeed

• lightSpeed

最后肯定是要放上官网的链接的：https://www.npmjs.com/package/vue2-animate#custom-transition-classes
另一个链接是VUE过渡的链接:https://cn.vuejs.org/v2/guide/transitions.html