当前位置: 首页 > 工具软件 > vue-slideout > 使用案例 >

Vue C3动画 vue2-animate

常枫涟
2023-12-01

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

 类似资料: