Vue Material - Native transitions on router view

Question

In my current project I'm using Vue Material to develop a single page app. The logic follows the trend: a single "container" component in which I shift the current view based on routes.

On Vue Material website (in the docs section), I noticed that during navigation, pages are being animated in material design style, as the design pattern suggests (with the "fade/slideup" transition). I didn't see any reference about it on the mentioned docs.

Anyone knows if those are transitions that must be implemented ad-hoc, like the rest of typical Vue apps, or are integrated on the Vue Material framework but my app lacks of some implementation (i.e. using Vue Router may cause some sort of bug)? At this time in my code there aren't <transition> tags, I'm using material components as the documentation shows them.

Thanks in advance for the answer.

Un1 Un1 · Accepted Answer · 2018-07-14T11:22:16

You should wrap <router-view> with a <transition> tag:

<transition name="fade-slide-up" mode="out-in">
  <router-view></router-view>
</transition>

And then create the transition that you want in <style>. Here's an example:

.fade-slide-up-enter-active {
  transition: all 0.5s ease;
}
.fade-slide-up-leave-active {
  transition: all 0.5s ease;
}
.fade-slide-up-enter, .fade-slide-up-leave-to {
  transform: translateY(40px);
  opacity: 0;
}

Vue Material - Native transitions on router view

1 Answers