單元素/組件的過渡

過渡的類名

在進入/離開的過渡中，會有 6 個 class 切換。

• v-enter ：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。
• v-enter-active ：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。
• v-enter-to : 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。
• v-leave : 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
• v-leave-active ：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。
• v-leave-to : 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除。
  
  對於這些在過渡中切換的類名來說，如果你使用一個沒有名字的 <transition>，則 v- 是這些類名的默認前綴。如果你使用了 <transition name="my-transition">
  ，那麽 v-enter 會替換為my-transition-enter。

css過渡

常用的過渡都是使用 CSS 過渡。

<style>
/* 可以設置不同的進入和離開動畫 */
/* 設置持續時間和動畫函數 */
.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
}
</style>
<div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="slide-fade">
        <p v-if="show">hello</p>
    </transition>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        show: true
    }
})
</script>
 

css動畫

<style>
.bounce-enter-active {
    animation: bounce-in .5s;
}
.bounce-leave-active {
    animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
</style>
<div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="bounce">
        <p v-if="show">hello</p>
    </transition>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        show: true
    }
})
</script>

自定義過渡類名

我們可以通過以下特性來自定義過渡類名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

他們的優先級高於普通的類名，這對於 Vue 的過渡系統和其他第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用。

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
<div id="app">
    <button @click="show = !show">Toggle</button>
    <transition 
        name="custom-classes-transition"
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight"
    >
        <p v-if="show">hello</p>
    </transition>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        show: true
    }
})
</script>

Vue - 過渡