Question

如何在通过页面/网址导航（通过$ router）时执行动画。即，我如何在节目和页面休假时执行动画？每页都会有不同的进入和离开动画。动画很复杂，因此我们使用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>

Answer 1

选中此示例：https://codesandbox.io/s/n38vz0pnzp

它按预期触发。

我添加了appear道具，即使是第一个组件安装（启动应用程序时）也会触发输入动画。

执行页面显示并离开动画：转换仅偶尔触发

1 个答案: