Vue page switch effect BubbleTransition

CodePen address

After the front end uses SPA, it can gain more control, such as page switching animation, we may not be able to do the above effect with the back end page, or there will be obvious flash screen. Because all resources need to be reloaded.

Today we use vue, Vue-Router, animejs to explain how the above effect is achieved.

steps

Call components functionally

I want the effect to be called from an object, not v-show, V-if, etc., and still use Vue to write components for consistency. I usually implement it with a new Vue root node, making the effect independent of the business component.

let instance = null

function createServices (Comp) {
  // ...
  return new Vue({
    // ...
   }).$children[0]
}

function getInstance () {
  instance = instance || createServices(BubbleTransitionComponent)
  return instance
}

const BubbleTransition = {
  scaleIn: () => {
    return getInstance().animate('scaleIn')
  },
  fadeOut: () => {
    return getInstance().animate('fadeOut')
  }
}
Copy the code

Then realize BubbleTransitionComponent, then BubbleTransition scaleIn, BubbleTransition. ScaleOut can work normally. Animejs is a lightweight and powerful animation library that doesn’t cost much to use.

Anime ({}).finished is used here to retrieve the Promise object, which gets the callback at the end of animation execution.

<template>
  <div class="transition-bubble">
    <span v-show="animating" class="bubble" id="bubble">
    </span>
  </div>
</template>

<script>
import anime from 'animejs'
export default {
  name: 'transition-bubble',
  data () {
    return {
      animating: false,
      animeObjs: []
    }
  },
  methods: {
    scaleIn (selector = '#bubble', {duration = 800, easing = 'linear'} = {}) {
      // this.animeObjs.push(anime().finished)
    },
    fadeOut (selector = '#bubble', {duration = 300, easing = 'linear'} = {}) {
      // ...
    },
    resetAnimeObjs () {
      this.animeObjs.reset()
      this.animeObjs = []
    },
    animate (action, thenReset) {
      return this[action]().then(() => {
        this.resetAnimeObjs()
      })
    }
  }
}
Copy the code

The initial idea was to add a tag to a specific route meta in the router config and animate the tag beforeEach. However, this method is not flexible enough. Instead, use Hash to mark and reset Hash when switching with vue-router.

<router-link class="router-link" to="/#__bubble__transition__">Home</router-link>
Copy the code

const BUBBLE_TRANSITION_IDENTIFIER = '__bubble__transition__'

router.beforeEach((to, from, next) => {
  if (to.hash.indexOf(BUBBLE_TRANSITION_IDENTIFIER) > 0) {
    const redirectTo = Object.assign({}, to)
    redirectTo.hash = ''
    BubbleTransition.scaleIn()
      .then(() => next(redirectTo))
  } else {
    next()
  }
})

router.afterEach((to, from) => {
  BubbleTransition.fadeOut()
})
Copy the code

Cool animation can catch the eye of the user in a moment, I myself also often sent when browsing some websites, wocao, so cool!! Sigh. The final implementation may not use a few lines of code, their own hands to achieve it, the next designer put forward unreasonable animation requirements can be installed force, this effect I can make minutes, but I think here should not use ** animation, does not meet the psychological expectations of users ah.

CodePen address, welcome star

If reproduced, please indicate the source:
w3ctrain.com / 2018/04/07/vue-page-bubble-transition/