XOOPS輕鬆架 - 線上書籍

:::

Vue.js 3.0 筆記
=============

1. 範例（利用`<transition name="tad"></transition>`來勾住 組件中進入和離開 DOM ） 
    ```markup
    <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中的 名稱 
    ```markup
    <transition name="名稱"></transition> 
    ```
    
    在 style中有六種狀態（名稱規則是固定的）
    
     
    ```css
    .名稱-enter-active {} /* 整個進入動畫期間的狀態 */
    .名稱-enter-from {} /* 進入動畫從 */
    .名稱-enter-to {} /* 進入動畫止 */
    
    .名稱-leave-active {} /* 整個離開動畫期間的狀態 */
    .名稱-leave-from {} /* 離開動畫從 */
    .名稱-leave-to {} /* 離開動畫止 */
    ```
    
    ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/33/%E5%9C%96%E7%89%871.png)
 
完整範例：

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1739

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器