:::

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 {} /* 離開動畫止 */

完整範例:


:::

書籍目錄

展開 | 闔起

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

計數器

今天: 2841284128412841
昨天: 3755375537553755
總計: 4458680445868044586804458680445868044586804458680