Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧

要点：

1. 动画容器为相对定位，动画元素为绝对定位
2. 每个动画元素都需单独用 <transition></transition> 包裹来添加过渡动画效果

完整演示范例代码

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