<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;

}

<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) {

            // ...

        }