Vue css過渡 和 js 鉤子過渡

css過渡

 

<transition name="slide">
          <div v-show="!showChatInput" class="slide-footer" @click="showChatInput = !showChatInput" >回覆</div>
</transition>

/* 能夠設置不一樣的進入和離開動畫 */
/* 設置持續時間和動畫函數 */
.slide-enter-active,
.slide-leave-active{
    transition: all 1s ease;
}
.slide-enter, .slide-leave-to {
    transform: translateY(100%);
    opacity: 0;
}
.slide-enter-to, .slide-leave {
    transform: translateY(0);
    opacity: 1;
}

xx-enter-active,xx-leave-active 是進入和離開的整個過程 設置過渡時間便可

xx-enter,xx-leave-to 是 進入前 和離開後的狀態（對於簡單的過渡，從下面滑入滑出，進入前和和離開後 自己就是同一狀態 因此能夠寫一個樣式）

xx-enter-to,xx-leave 是 進入後和離開前的狀態

 

js 鉤子函數過渡

 

<transition v-on:before-enter="beforeEnter"
                            v-on:enter="enter"
                            v-on:after-enter="afterEnter"
                            v-on:enter-cancelled="enterCancelled"

                            v-on:before-leave="beforeLeave"
                            v-on:leave="leave"
                            v-on:after-leave="afterLeave"
                            v-on:leave-cancelled="leaveCancelled">
    
    <com></com> // 某某過渡組件
</transition>

// --------
        // 進入中
        // --------

        beforeEnter: function (el) {
            // ...
            el.style.transform = 'translateY(100%)'
            el.style.opacity = 0
        },
        // 當與 CSS 結合使用時
        // 回調函數 done 是可選的
        enter: function (el, done) {
            // ...
            el.offsetWidth
            el.style.transform = 'translateY(0)'
            el.style.opacity = 1
            el.style.transition = 'all 1s ease'
            done()
        },
        afterEnter: function (el) {
            // ...
            this.footerHeight = '350px'
        },
        enterCancelled: function (el) {
            // ...
        },

        // --------
        // 離開時
        // --------

        beforeLeave: function (el) {
            // ...
            console.log('beforeleave')
            // el.style.transform = 'translateY(0)'
            // el.style.opacity = 1
        },
        // 當與 CSS 結合使用時
        // 回調函數 done 是可選的
        leave: function (el, done) {
            // ...
            console.log('leave')
            setTimeout(() => {
                // el.offsetWidth
                el.style.transform = 'translateY(100%)'
                el.style.opacity = 0
                el.style.transition = 'all 20s ease'
                done()
            })

        },
        afterLeave: function (el) {
            // ...
            this.footerHeight = '40px'
        },
        // leaveCancelled 只用於 v-show 中
        leaveCancelled: function (el) {
            // ...
        }

重點：

el.offsetWidth  是用來重繪頁面的 不加上這句話 沒有過渡效果 也能夠用setTimeout（（=>{}））