<template>
    <transition name="fade" mode="out-in">
        <router-view></router-view>
    </transition>
</template>
<script>
export default {
    name: 'DynamicRoute',
    data() {
        return {

        }
    },

    mounted() {

    },

    methods: {

    },

}
</script>
<style scoped>
.wrapper {
    width: 100%;
    min-height: 100vh;
}

.slide-enter-active,
.slide-leave-active {
    transition: all 0.75s ease-out;
}


.slide-enter-to {
    position: absolute;
    right: 0;
}


.slide-enter-from {
    position: absolute;
    right: -100%;
}


.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}


.slide-leave-to {
    position: absolute;
    left: -100%;
}


.slide-leave-from {
    position: absolute;
    left: 0;
}

</style>