Vue C3动画 vue2-animate

2020-06-02 10:53:08 阅读：539 来源： 互联网

标签：动画 Vue leave vue2 enter C3 animate class

　　最近写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

标签：动画,Vue,leave,vue2,enter,C3,animate,class
来源： https://www.cnblogs.com/daniao11417/p/13029872.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9