Как я могу выполнять анимацию при переходе (через $ router) к странице / URL-адресу. То есть, как я могу выполнять анимацию в шоу и на выходе из страницы? У меня будут разные анимации входа и выхода для каждой страницы. Анимации сложны, поэтому мы используем обратные вызовы JavaScript вместо реализации css3
Я попытался выполнить следующее, но обратные вызовы перехода не запускаются каждый раз. Для некоторых страниц обратные вызовы запускаются для других, которые они не делают, и у всех них есть точный код. Это довольно странно.
Пример MyPage.vue (может быть Contact.vue, AboutUs.vue и т. Д.):
<template>
<transition v-on:enter="enter" v-on:leave="leave">
<main>
<p>Foo</p>
</main>
</transition>
</template>
<script type="text/javascript">
import gsap from 'gsap' // include animation library
export default {
methods: {
enter: function (el, done) {
// I only see the text enter sometimes for a page. Its not consistently firing
console.log('enter')
done()
},
leave: function (el, done) {
// I only see the text leave sometimes for a page. Its not consistently firing
console.log('leave')
done()
}
}
}
</script>