Vue C3动画 vue2-animate

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

　　最近写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 C3动画 vue2-animate 的全部内容， 来源链接： utcz.com/z/380151.html

回到顶部