Transitions between pages, routes, vues

  • I’m having trouble trying to find the best solution / method for transitioning between routes, pages and vues that are similar to Iphone / Android transitions.

    Are there any examples anyone knows of to help be achieve this?

    Many thanks

  • Admin

    This is the second time someone mentions about transition animations between routes/pages/views. Guess I should add this to the todo lists. To create some default transitions that can be used out of the box.

  • Admin

    Opened issue for this.
    Meanwhile you can take a look at maybe you can extract the right animations that you need.

  • I did try to use it as per VueRouter docs but it’s not working.
    E.g. with fade it is fading out page which is leaving but next page is already below that and then come up right after fade finishes.
    Did anyone worked out how to get nice transitions between pages? I am using vue2-animate

  • Hi maybe it helps. This is working for me quite good with the animate.css library.

                  enter-active-class="animated slideInUp"
                  leave-active-class="animated fadeOut"
          <router-view class="layout-view"></router-view>

  • I’ve tried the proposed solution, but I can’t find how to do a transition to a “subpage”. Imagine you have an index page and a detail page. When you click an item in the index page, the detail slides in from the right, pushing the index out to the left. When you are done with the detail page, the back button or “go back/done” button will slide in the index page from the right, sliding the detail page out to the right.

    See the PAGE button for the Slide transition for a real world demo:

  • I know this was a while ago, but in case anyone comes along, this is how I got the “subpage” sliding in from the right to work:

        <transition :name="transitionName">
            <router-view class="child-slide"></router-view>
    export default {
      data () {
        return {
          transitionName: ''
      beforeRouteUpdate (to, from, next) {
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        this.transitionName = toDepth < fromDepth ? 'overlap-left' : 'overlap-right'
    .child-slide {
      width: 100%;
      position: absolute;
      transition: all 0.3s;
    .overlap-left-enter, .overlap-left-enter-active {
      opacity: 0;
    .overlap-left-enter-to {
      opacity: 1;
    .overlap-left-leave-active {
      transform: translate(100%, 0);
    .overlap-right-leave-active {
      z-index: -1;
      opacity: 1;
      transform: translate(-30px, 0);
    .overlap-right-enter {
      transform: translate(100%, 0);

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.