Vue過渡和動畫

過渡

前提： 需要過渡的元素要有 v-if 或者是 v-show 切換

1. 將需要添加過渡效果的元素用 <transition></transition> 組件包裹起來；
2. 需要過渡的元素有 v-if 或 v-show 切換；

        .box {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        <transition>
            <div class="box"
            	v-show="show"
            ></div>
        </transition>
        
        <button @click="show = !show">
            Toggle
        </button>

        new Vue({
            el: "#app",
            data() {
                return {
                    show: true
                }
            },
        })

3. 給 <transition> 組件指定 name 屬性；
4. 根據指定的 name 屬性寫過渡樣式；

        <transition
            name="scale"
        >
            <div class="box" v-show="show"></div>
        </transition>

        /* 
            進入過渡：隱藏 -> 顯示；
            離開過渡：顯示 -> 隱藏；
         */

        /* 1. 定義進入過渡的開始狀態； */
        .scale-enter{
            transform: scale(0);
        }
        /* 2. 定義進入過渡生效時的狀態；這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。 */
        .scale-enter-active {
            transition: all 1s;
        }
        /* 3. 定義進入過渡的結束狀態； */
        .scale-enter-to {
            transform: scale(1);
        }

        /* 4. 定義離開過渡的開始狀態； */
        .scale-leave {
            transform: scale(1);
        }
        /* 5. 定義離開過渡生效時的狀態；這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。 */
        .scale-leave-active {
            transition: all 2s;
        }
        /* 6. 定義離開過渡的結束狀態； */
        .scale-leave-to {
            transform: scale(0);
        }