vue2-animate基础入门_vue的一些常用动画animate css来实现

vue2-animate基础入门

官方网址:https://the-allstars.com/vue2-animate/

vue2-animate基础入门_vue的一些常用动画animate css来实现

GitHub:https://github.com/asika32764/vue2-animate

简介描述:vue的一些常用动画animate css来实现

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 

海计划公众号
(0)
上一篇 2020/03/11 07:00
下一篇 2020/03/11 07:00

您可能感兴趣的内容