[vue]使用vue2-animate來簡單達成動畫效果
在用jquery的時候，提供了多動畫的api給我們操作元素，不過後來出現css3之後，動畫交給css3來完成，而javascript就負責好自己的事情，似乎也是越來越分工明確，雖然vue可以用很多種方式來完成動畫效果，可以使用css3的方式，也可以使用javascript的方式，而這篇想來說明一下我發現了一個vue2的plugin，已經有高手幫我們包裝好了使用animate.css，幫我們包裝成vue專用的版本，這樣子我們就可以很簡單的做完一些動畫效果，讓網頁感覺比較潮一點不會那麼死板了。
首先來參訪一下官方的位址(https://github.com/asika32764/vue2-animate)，說明很簡短的就結束了，所以如果英文能力還行的讀者，也可以自行去官網看一下就明白怎麼使用了，我這邊也只是簡短的紀錄一下。
如果你有npm的話，可以使用npm的方式，但我這邊是直接把dist的程式碼抓下來，因為我並不是single page file的
然後來一個簡單的if動畫吧
<body>
<link rel="stylesheet" href="vue-animate.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<input type="checkbox" v-model="isShow">
<transition name="bounce">
<div v-if="isShow"> this is show</div>
</transition>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
</body>
如果我們想設定離開和進入的各別狀態，也是辦得到的
<body>
<link rel="stylesheet" href="vue-animate.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<input type="checkbox" v-model="isShow">
<transition enter-active-class="bounceInLeft" leave-active-class="bounceOutLeft">
<div v-if="isShow"> this is show</div>
</transition>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
</body>
如果我們想要用v-for的話，就用transition-group來達成
<body>
<link rel="stylesheet" href="vue-animate.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<input type="checkbox" v-model="isShow">
<transition enter-active-class="bounceInLeft" leave-active-class="bounceOutLeft">
<div v-if="isShow"> this is show</div>
</transition>
<hr>
<!--下面是簡單的新增部份-->
<input type="text" v-model="name" />
<button @click="add">add</button>
<transition-group name="fadeLeft" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
isShow: true,
items: ['anson', 'anson1', 'anson2'],
name: ''
},
methods: {
add() {
this.items.push(this.name)
this.name = ''
}
}
})
</script>
</body>
其實真的蠻簡單的就達成把vue加上animate.css的效果，如果有興趣的話，可以至(http://jsbin.com/webetixulu/1/edit?html,output)玩玩看
