在 VUE CLI 中使用 this.router.push 跟踪动画结束的过渡

Question

非常希望得到您的帮助！我是初学者，这是我第一次创建 Web 应用程序。

我使用 Vue Cli，有一个 lottie 元素应该通过点击动画（我做到了），然后我应该去“其他页面”（我做到了）但是，我如何实现只有在动画结束后才过渡到页面？帮助！不客气！对于动画，我使用 Anime.js

<script>
import { translate } from '../js/animate'

export default {
  methods: {
    go () {
      translate(this.$refs.square)
      this.$router.push('Comprestore')
    }
  }
}
</script>

/vue

<template>
  <div id="animate" v-on:click = "go" ref="square">
    <app-lottie></app-lottie>
  </div>
</template>

<style scoped>
</style>

import anime from 'animejs'

export function translate (element) {
  anime({
    targets: element,
    translateX: 500
  })
}

Answer 1

您可以使用complete回调等待动画完成。

现在您的代码可能如下所示：

...
  go () {
    translate(this.$refs.square, () => {
      this.$router.push('Comprestore')
    })
  }
...

和

export function translate (element, callback) {
  anime({
    targets: element,
    translateX: 500,
    complete: callback
  })
}

我创建了示例here。

在示例中，我还通过使用 Vue 内置 transition 在页面之间进行转换来使用页面转换。参见 Enter/Leave & List Transitions and Transitions in Vue Router。

在 VUE CLI 中使用 this.router.push 跟踪动画结束的过渡

Transition using this.router.push with tracking end of animation in VUE CLI

transition

vue.js

vue-router

lottie

anime.js