vue 过渡动画 使用

<template>
    <div>
        <button @click="play('topToTop')">从顶部滑入、顶部滑出</button>
        <button @click="play('topToBottom')">从顶部滑入、底部滑出</button>
        <button @click="play('bottomToTop')">从底部滑入、顶部滑出</button>
        <button @click="play('bottomToBottom')">从底部滑入、底部滑出</button>
        <button @click="play('leftToRight')">从左侧滑入、右侧滑出</button>
        <button @click="play('leftToLeft')">从左侧滑入、左侧滑出</button>
        <button @click="play('rightToLeft')">从右侧滑入、左侧滑出</button>
        <button @click="play('rightToRight')">从右侧滑入、左侧滑出</button>
        <div class="view">
            <transition :name="transName">
                <div v-show="show" class="block">Element</div>
            </transition>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                transName: '',
                show: true,
            }
        },
        methods: {
            play(name) {
                this.transName = name;
                this.show = !this.show;
            }
        }
    }
</script>
<style>
    .view {
        position: relative;
        height: 300px;
        width: 300px;
        background: gainsboro;
        overflow: hidden;
    }
 
    .block {
        position: absolute;
        height: 100%;
        width: 100%;
        text-align: center;
        color: white;
        line-height: 300px;
        background: red;
    }
 
    /*滑入——从顶部*/
    @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%
        }
    }
 
    
    /*(滑入)——从顶部滑入,从顶部滑出*/
    .topToTop-enter-active {
        animation: slideIn_top 1s;
    }
    /*(滑出)——从顶部滑入,从顶部滑出*/
    .topToTop-leave-active {
        animation: slideOut_top 1s;
    }
 
 
    /*(滑入)——从顶部滑入,从底部滑出*/
    .topToBottom-enter-active {
        animation: slideIn_top 1s;
    }
    /*(滑出)——从顶部滑入,从底部滑出*/
    .topToBottom-leave-active {
        animation: slideOut_bottom 1s;
    }
 
 
    /*(滑入)——从底部滑入,从顶部滑出*/
    .bottomToTop-enter-active {
        animation: slideIn_bottom 1s;
    }
    /*(滑出)——从底部滑入,从顶部滑出*/
    .bottomToTop-leave-active {
        animation: slideOut_top 1s;
    }
 
 
    /*(滑入)——从底部滑入,从底部滑出*/
    .bottomToBottom-enter-active {
        animation: slideIn_bottom 1s;
    }
    /*(滑出)——从底部滑入,从底部滑出*/
    .bottomToBottom-leave-active {
        animation: slideOut_bottom 1s;
    }
 
 
    /*(滑入)——从左侧滑入,从右侧滑出*/
    .leftToRight-enter-active {
        animation: slideIn_left 1s;
    }
    /*(滑出)——从左侧滑入,从右侧滑出*/
    .leftToRight-leave-active {
        animation: slideOut_right 1s;
    }
 
 
    /*(滑入)——从左侧滑入,从左侧滑出*/
    .leftToLeft-enter-active {
        animation: slideIn_left 1s;
    }
    /*(滑出)——从左侧滑入,从左侧滑出*/
    .leftToLeft-leave-active {
        animation: slideOut_left 1s;
    }
 
 
    /*(滑入)——从右侧滑入,从左侧滑出*/
    .rightToLeft-enter-active {
        animation: slideIn_right 1s;
    }
    /*(滑出)——从右侧滑入,从左侧滑出*/
    .rightToLeft-leave-active {
        animation: slideOut_left 1s;
    }
 
 
    /*(滑入)——从右侧滑入,从右侧滑出*/
    .rightToRight-enter-active {
        animation: slideIn_right 1s;
    }
    /*(滑出)——从右侧滑入,从右侧滑出*/
    .rightToRight-leave-active {
        animation: slideOut_right 1s;
    }
</style>