6-1 transition + keyframes

1. 範例：

   <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 {
     animation: tad-in 0.5s;
   }
   .tad-leave-active {
     animation: tad-in 0.5s reverse;
   }
   @keyframes tad-in {
     0% {
       transform: scale(0);
     }
     50% {
       transform: scale(1.25);
     }
     100% {
       transform: scale(1);
     }
   }
   
   #box {
     width: 100px;
     height: 100px;
     background-color: rgb(109, 148, 111);
   }
   </style>

   Copy

    

2. reverse 是反轉之意

範例內容：