Vue.js 执行页面显示并保留动画：仅偶尔触发过渡

如何在导航（通过$router）到页面/url或从页面/url导航时执行动画。即，如何在显示和页面左侧执行动画？我将有不同的进入和离开动画的每一页。动画非常复杂，因此我们使用javascript回调而不是css3实现

我尝试了以下操作，但是转换回调不会每次都触发。对于某些页面，回调会触发其他页面，但它们没有，而且它们都有确切的代码。这很奇怪

示例

MyPage.vue

（可以是

Contact.vue

，

AboutUs.vue

等）：

福

从“gsap”导入gsap//包括动画库
导出默认值{
方法：{
输入：功能（el，完成）{
//我只看到文本有时输入页面，但并不一致
console.log（'enter'）
完成（）
},
离开：功能（el，完成）{
//我只看到文本有时会留下一页，但并不总是这样
console.log（'leave'）
完成（）
}
}
}

检查此示例：

它正在按预期触发

我添加了

显示

道具，即使在第一次安装组件时（启动应用程序时），它也会触发enter动画

<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>