30 lines
828 B
SCSS
30 lines
828 B
SCSS
.fade-enter-active {
|
|
transition: opacity 0.8s ease;
|
|
}
|
|
|
|
.fade-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.route-fade-enter-active .fade-on-route-transition {
|
|
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 {
|
|
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-leave-to .fade-on-route-transition {
|
|
/*
|
|
Hack around a Chrome 96 bug in handling nested opacity transitions.
|
|
This is not needed in other browsers or Chrome 99+ where the bug
|
|
has been fixed.
|
|
*/
|
|
opacity: 0.001;
|
|
}
|