45 lines
724 B
Vue
45 lines
724 B
Vue
<template>
|
|
<transition
|
|
:name="transitionName"
|
|
mode="out-in"
|
|
>
|
|
<div :key="routeKey" class="route-wrapper">
|
|
<slot></slot>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
routeKey: { type: String, required: true }
|
|
});
|
|
|
|
const transitionName = ref('route-fade');
|
|
</script>
|
|
|
|
<style scoped>
|
|
.route-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Fast, lightweight fade transition — keeps navigation feeling instant */
|
|
.route-fade-enter-active {
|
|
transition: opacity 0.12s ease-out;
|
|
}
|
|
|
|
.route-fade-leave-active {
|
|
transition: opacity 0.08s ease-in;
|
|
}
|
|
|
|
.route-fade-enter-from {
|
|
opacity: 0;
|
|
}
|
|
|
|
.route-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|