Transitions between pages, routes, vues

jammer

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

rstoenescu

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.

rstoenescu

Opened issue https://github.com/quasarframework/quasar/issues/169 for this.
Meanwhile you can take a look at https://github.com/haydenbbickerton/vue-animate maybe you can extract the right animations that you need.

mariaczi

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

guidoec

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


      <transition
              name="transitions"
              enter-active-class="animated slideInUp"
              leave-active-class="animated fadeOut"
              mode="out-in"
      >
      <router-view class="layout-view"></router-view>
      </transition>

manelclos

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: http://demos.jquerymobile.com/1.4.5/transitions/

greene48

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:

<template>
  <div>
    <transition :name="transitionName">
      <keep-alive>
        <router-view class="child-slide"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>
<script>
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'
    next()
  }
}
</script>

<style>
.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);
}
</style>

blini

thank you

aznric3boi91

@greene48 said in Transitions between pages, routes, vues:

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:

<template>
  <div>
    <transition :name="transitionName">
      <keep-alive>
        <router-view class="child-slide"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>
<script>
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'
    next()
  }
}
</script>

<style>
.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);
}
</style>

This is a bit jumpy. Was wondering if you had to a more updated version of this. Thanks!

No More Posting New Topics!

Transitions between pages, routes, vues