vue集成vue2-animate插件实现常用动画

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013144287/article/details/90406839

                                vue2集成vue2-animate插件实现常用动画

        vue的一些常用动画animate css来实现,针对vue2出现了一款插件vue2-animate,其实更权威的介绍在这里欢迎访问https://www.npmjs.com/package/vue2-animate,看一下如何使用呢?

一、安装

npm install --save vue2-animate

 

二、main.js引入, 加入以下这句

import 'vue2-animate/dist/vue2-animate.min.css'

 

三、使用,在XXX.vue界面,脚手架生成的vue页面模板都是固定的

<template>
  <transition name="bounce" enter-active-class="bounceInLeft" leave-active-    
   class="bouceOutRight">
    <div>
      ---------------------------------------
      ---------------------------------------
      ---------------------------------------
      ---------------------------------------
    </div>
  </transition>
</template>

 

关于name共有以下这几种

Bounce

  • bounce
  • bounceDown
  • bounceLeft
  • bounceRight
  • bounceUp

Fade

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

Rotate

  • rotate
  • rotateDownLeft
  • rotateDownRight
  • rotateUpLeft
  • rotateUpRight

Slide

  • slideDown
  • slideLeft
  • slideRight
  • slideUp

Zoom

  • zoom
  • zoomDown
  • zoomLeft
  • zoomRight
  • zoomUp

可以试试效果

展开阅读全文

没有更多推荐了,返回首页