今天是第二十九天，我想分享一下Transition組件

Vue 提供內置組件，可以幫助你製作元素或組件狀態有變化時的過渡和動畫，

• Transition組件
  這是一個內置組件，它可以在任何組件中都能被使用，不用額外綁定。
  可以將出現、消失的動畫應用在透過默認插槽傳遞給它的元素或組件。

• CSS 的過渡效果
  一共有6 個應用於進入與離開過渡效果的CSS class

• 出現(enter)
  v-enter-from：進入動畫的起始狀態。
  v-enter-active：進入動畫的生效狀態，作用於整個出現動畫階段。
  v-enter-to：進入動畫的結束狀態。

• 淡出(leave)
  v-leave-from：離開動畫的起始狀態。
  v-leave-active：離開動畫的生效狀態，作用於整個消失動畫階段
  v-leave-to：離開動畫的結束狀態。

開始寫程式吧

把要執行的元素或組件用Transition包起來

這裡是HTML、CSS的部分，可以在CSS中定義執行動畫的屬性、持續時間和速度。

<div id="app">
    <div style="height: 50px;">
      <transition>
        <div v-show="isShow">what's up?</div>
      </transition>
    </div>
        <button @click="isShow =! isShow">Click it</button>
    </div>

  <style>
button {
    font-size: 1rem;
} 

.v-enter-active, .v-leave-active {
    transition: opacity 1.5s;
}

.v-enter-from, .v-leave-to {
    opacity: 0;
}

.v-enter-to, .v-leave-from {
    opacity: 1.5;
}
</style>

這裡是JS的部分

<script>
    const app = Vue.createApp({
    data() {
        return {
            isShow: true
            }
        }
    });
    app.mount('#app');

執行結果為點擊按鈕”Click it”，”What’s up?”會有淡入、淡出的視覺效果。

參考文件:
https://vuejs.org/guide/built-ins/transition.html

Transition組件就分享到這邊，我們第三十天見。