vue2使用animate css

 

先上几个连接

vue插件大集合：awesome-vue 
vue2插件： vue2-animate：vue2-animate 
vue2插件vue2-animateDEMO： vue2-animatedemo：vue2-animate-demo

我想用过animatecss的都知道这是一个极其简单而又酷炫的css动画库，可是我想在vue2中使用animatecss倒是很麻烦的事。 
其实vue的官网上在使用过分的时候就说过和animate配合很好什么的bulabula，可是要是用的话也好麻烦，还要本身根据过分类名的写法写css，或者绑定一堆属性， 
可是可是，今天翻awesome-vue的时候正好看到有这么个插件：vue2-animate正好符合咱们的需求

vue2-animate

这个插件呢是个纯css库，只是简单地将原来的animate的动画类名写成了能够被vue的过渡标签直接使用的类名了。虽然仅仅是如此就极大地方便了咱们的使用。

使用vue2-animate

其实直接看他的github就很是快了 
这里简单地复述一遍

安装

安装的方式有不少种 
1> 在html文件中直接引用从github上下载的资源

<link rel="stylesheet" href="vue2-animate.min.css">

 

2>若是使用webpack而且用对了css-loader能够使用npm 安装 
npm安装包依赖

npm install --save vue2-animate 

 

 

在main.js中引用

require('vue2-animate/dist/vue2-animate.min.css') 或者 import 'vue2-animate/dist/vue2-animate.min.css';

 

3>使用less

@import "<PATH_TO_SOURCE>/src/vue2-animate.less";

 

4>使用构建器编译

git clone https://github.com/asika32764/vue2-animate.git cd vue2-animate npm install npm run build #Compiled .css files go to the dist folder

 

 

使用

1>基本的使用就是在过分元素上使用对应的name属性

<transition-group name="fadeLeft" tag="ul"> <li v-for="item in items" v-bind:key="item"> {{ item }} </li> </transition-group>

 

 

2>使用不一样的载入载出动画 
》》》第一种：使用custom-classes-transition,须要在不一样的载入载出动画上加-enter和-leave后缀

<transition name="custom-classes-transition" enter-active-class="bounceLeft-enter" leave-active-class="bounceRight-leave" > <p v-if="show">hello</p> </transition>

 

 

》》》第二种：使用in/out类名在动画名后面加上In或者Out

<transition name="bounce" enter-active-class="bounceInLeft" leave-active-class="bounceOutRight" > <p v-if="show">hello</p> </transition>

 

如今支持的动画

Bounce

bounce
bounceDown
bounceLeft
bounceRight
bounceUp
Fade

fade
fadeDown
fadeDownBig
fadeLeft
fadeLeftBig
fadeRight
fadeRightBig
fadeUp
fadeUpBig


rotate rotateDownLeft rotateDownRight rotateUpLeft rotateUpRight Slide slideDown slideLeft slideRight slideUp Zoom zoom zoomDown zoomLeft zoomRight zoomUp