Add transition to vue router

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-10-08 20:01:00 +02:00
parent 0820866bb8
commit 6b91d85bdc
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773

View File

@ -2,7 +2,9 @@
<div id="mobilizon"> <div id="mobilizon">
<NavBar /> <NavBar />
<main> <main>
<transition name="fade">
<router-view /> <router-view />
</transition>
</main> </main>
<mobilizon-footer /> <mobilizon-footer />
</div> </div>
@ -71,18 +73,10 @@ export default class App extends Vue {
/* Buefy imports */ /* Buefy imports */
@import "~buefy/src/scss/buefy"; @import "~buefy/src/scss/buefy";
.router-enter-active, .fade-enter-active, .fade-leave-active {
.router-leave-active { transition: opacity .75s;
transition-property: opacity;
transition-duration: 0.25s;
} }
.fade-enter, .fade-leave-to {
.router-enter-active {
transition-delay: 0.25s;
}
.router-enter,
.router-leave-active {
opacity: 0; opacity: 0;
} }