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
1 changed files with 6 additions and 12 deletions

View File

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