Stepped animation in vue

animationWaits.js

export default {
  beforeCreate () {
    this.$options.animationPromises = {}
    this.$options.animations && this.$options.animations.forEach(key => {
      this.$options.animationPromises[key] = null
    })
  },
  methods: {
    removeWait (type, event) {
      const promises = this.$options.animationPromises
      if (promises[type]) {
        this.$options.waitAnimationsDebug && console.log('clear wait %s', type)
        promises[type](event)
        promises[type] = null
      }
    },

    createWait (type, executor) {
      const promises = this.$options.animationPromises
      this.$options.waitAnimationsDebug && console.log('start wait %s', type)
      return new Promise(resolve => {
        promises[type] = resolve
        executor && executor()
      })
    },
  },
}

SlidePage.vue

<template>
  <Slide>
    <SlidePreview slot="preview"
      v-bind="previewData"
      :display-blur-items="displayBlurItems"
      :animate-blur-items="animateBlurItems"
      @transitionend="removeWait('blurItems')"/>
    <SlideAbout v-bind="aboutData" :hide="hideText"
      @transitionend="removeWait('text')"/>
  </Slide>
</template>

<script>
import Slide from 'src/views/elements/Slide'
import SlideAbout from 'src/views/elements/SlideAbout'
import SlidePreview from 'src/views/elements/SlidePreview'
import animationWaits from 'src/mixins/animationWaits'
import slideData from 'src/mixins/slideData'
import standardAnimations from 'src/mixins/standardAnimations'
import dragonsData from 'src/data/slider/dragons'

export default {
  name: 'dragons-page',
  mixins: [animationWaits, standardAnimations, slideData],
  components: {
    Slide,
    SlideAbout,
    SlidePreview,
  },
  slideData: dragonsData,
}
</script>

<style lang="stylus">
.dragons-page
  display block
</style>

standardAnimations.js

import pages from 'src/data/project-info'
import slides from 'src/data/slides'

export default {
  animations: ['text', 'blurItems'],
  inject: ['toggleWall', 'wallDirection'],
  data () {
    return {
      displayBlurItems: false,
      animateBlurItems: false,
      hideText: true,
    }
  },
  async mounted () {
    await this.createWait('text', () => { this.hideText = false })
    await this.toggleWall('hide')
    this.$emit('done')
    if (this.displayBlurItems !== undefined && this.animateBlurItems !== undefined) {
      await this.createWait('blurItems', () => {
        this.displayBlurItems = true
      })
      this.animateBlurItems = true
    }
  },
  async beforeRouteLeave (to, from, next) {
    if (to.name === 'More' && to.params.slug) {
      const page = pages.find(({ slug }) => slug === to.params.slug)
      if (!page) {
        return
      }
    }

    const toDepth = slides.findIndex(name => name === to.name)
    const fromDepth = slides.findIndex(name => name === from.name)
    this.wallDirection(toDepth < fromDepth ? 'right' : 'left')
    await this.$nextTick()

    const animateArr = []

    if (!this.hideText) {
      animateArr.push(this.createWait('text', () => {
        this.hideText = true
      }))
    }

    if (this.animateBlurItems && (this.displayBlurItems !== undefined && this.animateBlurItems !== undefined)) {
      animateArr.push(this.createWait('blurItems', () => {
        this.animateBlurItems = false
        this.displayBlurItems = false
      }))
    }

    await Promise.all(animateArr)
    await this.toggleWall('open')
    next()
  },
}