在vue元件中實現一些過渡動畫是很常見的，有時候使用一些css庫也是很正常的，今天就簡單的說一下在vue元件中使用transition與animate.css結合的用法

1. 安裝animate.css

   cnpm install animate.css –save

   當然也可以將animate.css檔案下載下來
   下載animate.css
   放進assets資料夾以供呼叫

2. 呼叫animate.css

   import ‘animate.css’

   或者

   import ‘../../assets/animate.css’

3. 設定類名
   在transition 標籤中設定自定義css類名，詳情看

   這裡 ,如下：

<template>
    <div id="app">
        <button @click="show = !show">隱藏/顯示</button>
         <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" >
            <p v-if="show">hello word,I love China</p
 
>
        </transition>
    </div>
</template>
<script>
    import $ from 'jquery'
    import 'animate.css'
    export default {
        data(){
            return {
                show:true,
            }
        },
        components:{
            tabA,
            tabB
        }
    }
 
</script>
<style scoped>
    #app{
        margin-left: 500px;
    }
</style>

具體animate.css的api可以看這裡，生動形象具體隨意選擇 animate.css API