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