6. transition 動畫

1. 範例（利用<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>
   

    

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

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

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

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

   

完整範例：