jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

synced up css with app.vue

Browse source
This commit is contained in:
Mark Harris 2022-05-20 09:32:31 -04:00
parent 476bd06bac
commit be65d13fbe
2 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/App.vue
View file

@ -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>

4
src/styles/common-animations.scss
View file

@ -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,