两个页面之间的转换不适用于 vue.js 和 GSAP

Question

我已经开始学习 vue.js，我想使用 GSAP（而不是 css）在两个页面之间进行转换，所以我找到了这些属性：v-on:enter , v-on:leave。

我的 v-on:enter 动画似乎只在第一次调用我的应用程序时起作用。我没有看到 "leave" 动画，而且当新页面出现时我有一些重复的内容。

我有两个问题：

我错过了什么？
如何在 DOM 完全加载后启动我的 v-on:enter 动画？（到目前为止，即使我的 DOM 没有完全加载，我的动画也会开始）

这是我在 App.vue 文件中使用的代码，非常感谢。

<template>
  <div id="app">

    <transition 
      appear
      v-on:enter="enter" 
      v-on:leave="leave"
      v-bind:css="false"
    >
      <router-view/>
    </transition>

  </div>
</template>

<script>
import { TweenMax } from "gsap/TweenMax";

export default {
  name: 'App',
  components: {
  },
  methods: {
    enter(el, done) {
      TweenMax.to('body', 1, {opacity:1, onComplete:done});
    },
    leave(el, done) {
      TweenMax.to('body', 1, {opacity:0, onComplete:done});
    }   
  }
}
</script>

Answer 1

首先使用 out-in transition mode 将当前视图转出，然后在完成后转入新视图。
在您的组件方法选项中创建一个 beforeEnter 方法以将目标元素 opacity 设置为 0。
听 beforeEnter JavaScript hook 添加 v-on:before-enter="beforeEnter" transition 个组件。

除非有充分的理由使用 body 作为目标元素，否则请改用视图组件 el。

修改后的代码：

<template>
  <div id="app">

    <transition 
      appear
      v-bind:css="false"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter" 
      v-on:leave="leave"
    >
      <router-view/>
    </transition>

  </div>
</template>

<script>
import { TweenMax } from "gsap/TweenMax";

export default {
  name: 'App',
  components: {
  },
  methods: {
    beforeEnter(el) {
      TweenMax.set(el, { opacity: 0 });
    },
    enter(el, done) {
      TweenMax.to(el, 1, { opacity:1, onComplete:done });
    },
    leave(el, done) {
      TweenMax.to(el, 1, { opacity:0, onComplete:done });
    }   
  }
}
</script>

两个页面之间的转换不适用于 vue.js 和 GSAP

Transition between two pages doesn't work with vue.js and GSAP

javascript

transition

vue.js

gsap