過度類名實現動畫

1、使用 transition 元素，把需要被動畫控制的元素，包裹起來 body

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 1、使用 transition 元素，把需要被動畫控制的元素，包裹起來-->
    <!-- transition 元素，是 Vue 官方提供的-->
    <transition>
        <h3 v-if="flag">這是一個H3</h3
 
>
    </transition>
</div>

<script>
    window.onload = function () {
        let vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        });
    }
</script>

2、自定義兩組樣式，來控制 transition 內部的元素實現動畫 css

    <style>
  	    /* 2、自定義兩組樣式，來控制 transition 內部的元素實現動畫*/
        /* 必須 v- 字首*/
        /* v-enter 【這是一個時間點】是進入之前，元素其實狀態，此時還沒有開始進入*/
        /* v-leave-to 【這是一個時間點】是動畫離開之後，離開的終止狀態，此時，元素動畫結束了*/

        .v-enter, .v-leave-to {
        /* 橫向淡入淡出動畫*/
            opacity: 0;
            transform:translateX
 
(150px);
        }

        /* v-enter-active 【入場動畫的時間段】*/
        /* v-leave-active 【離場動畫的時間段】*/

        .v-enter-active, .v-leave-active {
            transition: all 1s ease;
        }
    </style>

修改 v- 字首

• 修改transition中的name屬性值，之後css中引用字首就變為 name屬性值-
• 這個作用主要是一個頁面，不同元件有不同動畫時，用於區分動畫

1、使用 transition 元素，把需要被動畫控制的元素，包裹起來 body

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 1、使用 transition 元素，把需要被動畫控制的元素，包裹起來-->
    <!-- transition 元素，是 Vue 官方提供的-->
    <transition name="my">
        <h3 v-if="flag">這是一個H3</h3>
    </transition>
</div>

<script>
    window.onload = function () {
        let vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        });
    }
</script>

2、自定義兩組樣式，來控制 transition 內部的元素實現動畫 css

    <style>
  	    /* 2、自定義兩組樣式，來控制 transition 內部的元素實現動畫*/
        /* 必須 my- 字首*/
        /* my-enter 【這是一個時間點】是進入之前，元素其實狀態，此時還沒有開始進入*/
        /* my-leave-to 【這是一個時間點】是動畫離開之後，離開的終止狀態，此時，元素動畫結束了*/

        .my-enter, .my-leave-to {
            /* 橫向淡入淡出動畫*/
            opacity: 0;
            transform:translateX(150px);
        }

        /* my-enter-active 【入場動畫的時間段】*/
        /* my-leave-active 【離場動畫的時間段】*/

        .my-enter-active, .my-leave-active {
            transition: all 1s ease;
        }
    </style>