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（（=>{}））