使用vue动画完成滑入滑出切换

<template>
    <div style="padding: 30px">
        <button @click="play('slide_topToBottom')">从顶部滑入、底部滑出</button>
        <button @click="play('slide_bottomToTop')">从底部滑入、顶部滑出</button>
        <button @click="play('slide_leftToRight')">从左侧滑入、右侧滑出</button>
        <button @click="play('slide_rightToLeft')">从右侧滑入、左侧滑出</button>
        <div class="view">
        <transition :name="transName">
            <div v-show="active === 1" class="block red">第一页</div>
        </transition>
        <transition :name="transName">
            <div v-show="active === 2" class="block green">第二页</div>
        </transition>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            transName: "",
            active: 1
        }
    },
    methods: {
        play(name) {
            this.transName = name
            if (this.active === 1) {
                this.active = 2
            } else {
                this.active = 1
            }
        }
    }
}
</script>
    <style scoped>
    .view {
    position: relative;
    height: 100px;
    width: 200px;
    background: gainsboro;
    overflow: hidden;
    }

    .block {
    position: absolute;
    height: 100px;
    width: 200px;
    text-align: center;
    color: white;
    line-height: 100px;
    }

    .red {
    background: red;
    }

    .green {
    background: green;
    }

    /*滑入——从顶部*/
    @keyframes slideIn_top {
    0% {
        top: -100%;
    }
    100% {
        top: 0;
    }
    }

    /*滑入——从底部*/
    @keyframes slideIn_bottom {
    0% {
        top: 100%;
    }
    100% {
        top: 0;
    }
    }

    /*滑入——从左侧*/
    @keyframes slideIn_left {
    0% {
        left: -100%;
    }
    100% {
        left: 0;
    }
    }

    /*滑入——从右侧*/
    @keyframes slideIn_right {
    0% {
        left: 100%;
    }
    100% {
        left: 0;
    }
    }

    /*滑出——从顶部*/
    @keyframes slideOut_top {
    0% {
        top: 0;
    }
    100% {
        top: -100%;
    }
    }

    /*滑出——从底部*/
    @keyframes slideOut_bottom {
    0% {
        top: 0;
    }
    100% {
        top: 100%;
    }
    }

    /*滑出——从左侧*/
    @keyframes slideOut_left {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
    }

    /*滑出——从右侧*/
    @keyframes slideOut_right {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}

/*滑动(滑入)——从顶部滑入,从底部滑出*/
.slide_topToBottom-enter-active {
    animation: slideIn_top 1s;
}

/*滑动(滑出)——从顶部滑入,从底部滑出*/
.slide_topToBottom-leave-active {
    animation: slideOut_bottom 1s;
}

/*滑动(滑入)——从底部滑入,从顶部滑出*/
.slide_bottomToTop-enter-active {
    animation: slideIn_bottom 1s;
}

/*滑动(滑出)——从底部滑入,从顶部滑出*/
.slide_bottomToTop-leave-active {
    animation: slideOut_top 1s;
}

/*滑动(滑入)——从左侧滑入,从右侧滑出*/
.slide_leftToRight-enter-active {
    animation: slideIn_left 1s;
}

/*滑动(滑出)——从左侧滑入,从右侧滑出*/
.slide_leftToRight-leave-active {
    animation: slideOut_right 1s;
}

/*滑动(滑入)——从右侧滑入,从左侧滑出*/
.slide_rightToLeft-enter-active {
    animation: slideIn_right 1s;
}

/*滑动(滑出)——从右侧滑入,从左侧滑出*/
.slide_rightToLeft-leave-active {
    animation: slideOut_left 1s;
}
</style>