扫一扫分享
vue2-animate 是一款 vue的一些常用动画animate css来实现,针对vue2出现了一款插件。
一、安装
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
手机预览