:::

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>
    

     

  2. reverse 是反轉之意

範例內容:


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1740

計數器

今天: 4277427742774277
昨天: 3438343834383438
總計: 7394606739460673946067394606739460673946067394606