Переход с использованием this.router.pu sh с отслеживанием конца анимации в VUE CLI - PullRequest
Новая
       178

Переход с использованием this.router.pu sh с отслеживанием конца анимации в VUE CLI

1 голос

Очень надеюсь на вашу помощь! Я новичок, это мой первый опыт создания веб-приложений.

Я работаю с Vue Cli, есть элемент lott ie, который нужно анимировать по клику (я так и делал), тогда я должен go перейти на «другую страницу» (я сделал это). Но как мне реализовать переход на страницу только после завершения анимации? Помогите! Добро пожаловать! Для анимации я использую 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
  })
}

1 Ответ

0 голосов
/ 13 июля 2020

Вы можете использовать обратный вызов complete , чтобы дождаться завершения анимации.

Теперь ваш код может выглядеть так: 

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

и 

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

Я создаю пример здесь .

В этом примере я также использую переход между страницами, используя Vue встроенный transition для перехода между страницами. См. Enter / Leave & List Transitions and Transitions in Vue Router .

...