6. transition 動畫

範例（利用<transition name="tad"></transition>來勾住組件中進入和離開 DOM ）

<script>
import { ref } from "vue";
export default {
  setup() {
    const isAmin = ref(false);
    const goAmin = () => {
      isAmin.value = !isAmin.value;
    };
    return { isAmin, goAmin };
  },
};
</script>

<template>
  <button @click="goAmin">click</button>
  <transition name="tad">
    <div id="box" v-if="isAmin"></div>
  </transition>
</template>

<style>
.tad-enter-active,
.tad-leave-active {
  transition: opacity 1s ease;
}

.tad-enter-from,
.tad-leave-to {
  opacity: 0;
}
#box {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

動畫名稱會對應到 style中的名稱

<transition name="名稱"></transition>

在 style中有六種狀態（名稱規則是固定的）

.名稱-enter-active {} /* 整個進入動畫期間的狀態 */
.名稱-enter-from {} /* 進入動畫從 */
.名稱-enter-to {} /* 進入動畫止 */

.名稱-leave-active {} /* 整個離開動畫期間的狀態 */
.名稱-leave-from {} /* 離開動畫從 */
.名稱-leave-to {} /* 離開動畫止 */