在vue中使用animate庫

<style>
　　@keyframes bounce-in {
　　　　0% {
　　　　　　transform: scale(0);
　　　　}
　　　　50% {
　　　　　　transform: scale(1.5)
　　　　}
　　　　100% {
　　　　　　transform: scale(1);
　　　　}
　　}
　　.fade-enter-active{
　　　　transform-origin: left center;
　　　　animation: bounce-in 1s;
　　}
　　.fade-leave-active{
　　　　transform-origin: left center;
　　　　animation: bounce-in 1s reverse;
　　}
</style>
<div id='app'>
　　<transition name='fade'>
　　　　<div v-if='show'>hello world</div>
　　</transition>
　　<button @click='handleClick'>切換</button>
</div>

<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>

這是個放大的動畫效果，在vue里面能不能不用fade-leave-active，fade-enter-active這樣的規定好的class，我要用自定義的可不可以，可以

 

<style>
　　.active{
　　　　transform-origin: left center;
　　　　animation: bounce-in 1s;
　　}
　　.leave{
　　　　transform-origin: left center;
　　　　animation: bounce-in 1s reverse;
　　}
</style>

<transition
　　name='fade'
　　enter-active-class='active'
　　leave-active-class='leave'
>
　　<div v-if='show'>hello world</div>
</transition>

在transition里面起自己的別名

 

既然可以自定義自己的class，就可以使用我們的animate.css庫，animate.css庫是

https://daneden.github.io/animate.css/

這個庫提供了很多動畫效果，我們如果要使用這個動畫效果，可以下載下來

<script src="../vue.js"></script>
<link rel='stylesheet' type='text/css' href="../animate.css">
<div id='app'>
　　<transition
　　　　name='fade'
　  　　enter-active-class='animated swing' 　　　　leave-active-class='animated shake'
　　>
　　　　<div v-if='show'>hello world</div>
　　</transition>
　　<button @click='handleClick'>切換</button>
</div>

<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>

引入animate，出場動畫，入場動畫就不用自己寫了，animated表示引入庫里面的動畫，后面的swing,shake表示要引入的具體動畫名

 

用這個動畫庫的好處是很多復雜的效果就不用自己寫了，直接用庫里面的動畫效果就可以實現