preface

Nowadays, native experience is increasingly pursued in mobile terminal interaction. Recently, THE App just needs to make page transition effect, which is similar to the switching effect of wechat.

In the Vue2.0transitionUse of components

Vue2.0 provides the Transition component, and you can nest pages into the Transition component to implement transitions. There are six class switches in the entry/exit transition.

  • v-enter: Defines the state at the beginning of the transition. It takes effect before the element is inserted and is removed the next frame after the element is inserted.
  • v-enter-active: Defines the state when the transition takes effect. Applied throughout the transition phase, before the element is inserted and removed after the transition/animation is complete.
  • v-enter-to: Defines the end state of the transition. The next frame takes effect after the element is inserted (at the same timev-enterRemoved) after the transition/animation is complete.
  • v-leave: Defines the beginning state of the exit transition. Immediately after the exit transition is triggered, the next frame is removed.
  • v-leave-active: Defines the state when the exit transition takes effect. Applies throughout the exit transition phase, takes effect immediately when the exit transition is triggered, and removes after the transition/animation is complete.
  • v-leave-to: Defines the end state of the exit transition. The next frame takes effect after the exit transition is triggered (and the V-leave is deleted at the same time), and is removed after the transition/animation is complete.

v-enter-active
v-leave-active

App.vue

<div id="app" >
    <transition :name="transitionName">
        <router-view/>
    </transition>
</div>
Copy the code

Slide-left and slide-right states are defined to represent the transitions of the page to the left and right, i.e. forward and backward, respectively.

common.scss

.slide-left-enter-active {
    animation-name: slide-left-in;
    animation-duration:.3s;
}
.slide-left-leave-active {
    animation-name: slide-left-out;
    animation-duration:.3s;
}
.slide-right-enter-active {
    animation-name: slide-right-in;
    animation-duration:.3s;
}
.slide-right-leave-active {
    animation-name: slide-right-out;
    animation-duration:.3s;
}

@keyframes slide-left-in {
    0% {
        transform: translate3d(100%, 0, 0). 100%} {transform: translate3d(0, 0, 0); }} @keyframes slide-left-out {
    0% {
        transform: translate3d(0, 0, 0); 100%} {transform: translate3d(100%, 0, 0); }} @keyframes slide-right-in{
    0% {
        transform: translate3d(100%, 0, 0); 100%} {transform: translate3d(0, 0, 0); }} @keyframes slide-right-out  {
    0% {
        transform: translate3d(0, 0, 0); 100%} {transform: translate3d(100%, 0, 0). }}Copy the code

Listening to the$routeRealize page switch animation

In applications that use vue-Router, routing objects are injected into each component. You can get the current routing object by calling this.$route. The difficulty of switching pages is to determine whether a page moves forward or backward.

App.vue

watch: {
    // Listen for the switch animation
    $route(to, from) {
        const routeDeep = ['/'.'/team'.'/judge'.'/finish'.'/noData'.'/info']
        const toDepth = routeDeep.indexOf(to.path)
        const fromDepth = routeDeep.indexOf(from.path)
        this.transitionName = toDepth > fromDepth ? 'slide-left' : 'slide-right'}}Copy the code

In single-page applications, routeDeep can be defined according to the page hierarchy. For example, the info page is the second-level page, ranking last, and the rest are the first-level pages. When the page jumps from level 1 to level 2, use forward animation, and when the page jumps from level 2, use backward animation. Forget complex nested pages for a moment.

conclusion

Code creates the world, and the world belongs to the trisolaran. See you soon.