From 6b91d85bdcc168054154bdee2317757d6fc06a24 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 8 Oct 2019 20:01:00 +0200
Subject: [PATCH] Add transition to vue router
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
js/src/App.vue | 18 ++++++------------
1 file changed, 6 insertions(+), 12 deletions(-)
diff --git a/js/src/App.vue b/js/src/App.vue
index c71c69238..46a295aaa 100644
--- a/js/src/App.vue
+++ b/js/src/App.vue
@@ -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;
}