vue 仿屏幕切换效果

 vue 实现仿屏幕切换效果，很简单：

<template>
    <div>
        <transition name="fade-transform" mode="out-in">
            <slot></slot>
        </transition>    
    </div>
</template>


<script>
    export default {
        name: 'Transition'
    }
</script>

<style>
     :root {
        overflow-x: hidden;
    }
    
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.28s;
    }
    
    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }
    /* fade-transform */
    
    .fade-transform-leave-active,
    .fade-transform-enter-active {
        transition: all .3s;
    }
    
    .fade-transform-enter {
        opacity: 0;
        transform: translateX(-90vw);
    }
    
    .fade-transform-leave-to {
        opacity: 0;
        transform: translateX(90vw);
    }
</style>