SOURCE

new Vue({
    el: '#app',
    data() {
        return {
            show: false
        }
    }
})

<div id="app">
    <button @click="show = !show">展示</button>
    <transition>
        <div v-if="show">hi,~~</div>
    </transition>
</div>

/* 动画效果   来的效果 */
/* v-enter-active   是vue提供的名字：进入的时候要激活的样式 */
.v-enter-active{
    animation:atguigu 1s linear;
}
/* v-leave-active   是vue提供的名字：离开的时候要激活的样式 */
.v-leave-active{
    animation:atguigu 1s reverse;
}
@keyframes atguigu {
    0%{
        transform: translateX(-30px);
    }
    50%{
        transform: translateX(50px);
    }
    100%{
        transform: translateX(0px);
    }
}