1. 單元素/組件的過渡

　　Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡

• 條件渲染 (使用 v-if)
• 條件展示 (使用 v-show)
• 動態組件
• 組件根節點

實例：

<style>
    .fade-enter,.fade-leave-to{
        opacity: 0;
    }
    .fade-enter-active,.fade-leave-active{
        transition: opacity .5s;
    }
</style>

<!-- fade是自定義的名稱，會被當成類的前綴 "fade-enter"  -->
 

<div id="app">
    <transition name="fade">                       
        <div v-if="show"><h1>show</h1></div>
    </transition>
    <button @click="handleChange">change</button>
</div>

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

2. 過渡的類名

在進入/離開的過渡中，會有 6 個 class 切換：v-enter 、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to

關於過渡類名：

　　如果你使用一個沒有名字的 <transition>

　　如果你使用了 <transition name="my-transition">，那麽 v-enter 會替換為 my-transition-enter

3. 關於動畫 （此處省略）

4. vue中使用第三方animate.css 庫

　　首先link引入animate.css，然後結合自定義過渡的類名 enter-active-class、leave-active-class，

　　animated是必須要寫的，hinge shake是引入的動畫效果

<div id="app">
    <transition enter-active-class="animated hinge" leave-active-class="animated shake">
        <div v-if="show">show</div>
    </transition>
    <button @click="handleChange">change</button>
</div>

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

Vue——關於css過渡和動畫那些事