Add transition to vue router
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
0820866bb8
commit
6b91d85bdc
@ -2,7 +2,9 @@
|
|||||||
<div id="mobilizon">
|
<div id="mobilizon">
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<main>
|
<main>
|
||||||
<router-view />
|
<transition name="fade">
|
||||||
|
<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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user