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.gitcd vue2-animatenpm installnpm 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>

现在支持的动画

BouncebouncebounceDownbounceLeftbounceRightbounceUpFadefadefadeDownfadeDownBigfadeLeftfadeLeftBigfadeRightfadeRightBigfadeUpfadeUpBigrotaterotateDownLeftrotateDownRightrotateUpLeftrotateUpRightSlideslideDownslideLeftslideRightslideUpZoomzoomzoomDownzoomLeftzoomRightzoomUp

祝，玩的愉快