技術標籤：vueJavaScriptvue

vue過渡動畫

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。

對於這些在過渡中切換的類名來說，如果你使用一個沒有名字的 transition，則 v- 是這些類名的預設字首。 如果你使用了 transition name=“my-transition”，那麼 v-enter 會替換為 my-transition-enter。

transition元件

Vue 提供了 transition 的封裝元件，在下列情形中，可以給任何元素和元件新增進入/離開過渡
    條件渲染 (使用 v-if)
    條件展示 (使用 v-show)
 

當插入或刪除包含在 transition 元件中的元素時，Vue 將會做以下處理
    自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機新增/刪除 CSS 類名
    在進入/離開的過渡中，會有 6 個 class 切換。

/*隱藏變為顯示時的過渡*/
        v-enter：*(開始時的狀態)
            定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。
        v-enter-active：(過程,動畫效果)
            定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，
            在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函式。
        v-enter-to
 
:(完成後的狀態)
            2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入之後下一幀生效
            (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。


/*顯示變為隱藏時的過渡*/
        v-leave: (不可用)
            定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
        v-leave-active：
            定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，
            在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。
            這個類可以被用來定義離開過渡的過程時間，延遲和曲線函式。
        v-leave-to
 
:
            2.1.8版及以上 定義離開過渡的結束狀態。
            在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-0AESiYWW-1609210762817)(https://gitee.com/better_damu/sh_h5_20_0721_-vue/raw/master/%E8%AF%BE%E4%BB%B6/01_vue-base/img/transition.png)] 對於這些在過渡中切換的類名來說，如果你使用一個沒有名字的 transition，則 v- 是這些類名的預設字首。 如果你使用了 transition name=“my-transition”，那麼 v-enter 會替換為 my-transition-enter。

案例

  <style>
        .test{
            width: 400px;
            height: 400px;
            background: red;
            opacity: 1;
        }
       vue是支援過渡動畫的!!  它會幫我們給指定的節點加一系列的class
         a.當前這個節點需要被transition元件包裹
         b.當前這個節點必須擁有過渡
         c. 當前這個節點需要使用上v-show v-if指令

       當一個元素從顯示變為隱藏狀態時 vue在上述條件(a,b)成立的情況下會給當前元素加上3個class
             v-leave (不生效)
             v-leave-active
             v-leave-to

       當一個元素從隱藏變為顯示狀態時 vue在上述條件(a,b)成立的情況下會給當前元素加上3個class
             v-enter
             v-enter-active
             v-enter-to

        /*顯示變為隱藏時的過渡*/
        /*.damu-leave{opacity:1;background: green;}*/
        .damu-leave-active{transition:5s linear;}
        .damu-leave-to{opacity:0;background: green}

        /*隱藏變為顯示時的過渡*/
        .damu-enter{opacity: 0;background: green;}
        .damu-enter-active{transition:5s linear;}
        .damu-enter-to{opacity: 1;background: red;}

字首.damu是 transition的name名字

    </style>

<div id="app">
        <button @click="flag=!flag">click</button>
        <transition name="damu">
            <div class="test" v-if="flag"></div>
        </transition>
</div>

<script>
Vue.config.productionTip = false;
    new Vue({
        el:"#app",
        data(){
            return {
                flag:true
            }
        }
    })
</script>