commit
b5529ce31b
2 changed files with 4 additions and 3 deletions
|
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<transition :duration="{ enter: 150, leave: 150 }" name="route-fade" mode="out-in">
|
<transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
|
||||||
|
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
|
||||||
<component :is="Component" />
|
<component :is="Component" />
|
||||||
</transition>
|
</transition>
|
||||||
</router-view>
|
</router-view>
|
||||||
|
|
|
||||||
|
|
@ -12,11 +12,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.route-fade-enter-active .fade-on-route-transition {
|
.route-fade-enter-active .fade-on-route-transition {
|
||||||
transition: opacity 0.8s ease;
|
transition: opacity 0.2s ease-out; //This duration should be kept in sync with the app.vue <transition> element attribute
|
||||||
}
|
}
|
||||||
|
|
||||||
.route-fade-leave-active .fade-on-route-transition {
|
.route-fade-leave-active .fade-on-route-transition {
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.2s ease-in; //This duration should be kept in sync with the app.vue <transition> element attribute
|
||||||
}
|
}
|
||||||
|
|
||||||
.route-fade-enter-from .fade-on-route-transition,
|
.route-fade-enter-from .fade-on-route-transition,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue