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

Question

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

[我的v-on:enter动画似乎仅在我的应用程序的首次调用中起作用。我看不到“离开”动画，而且在出现新页面时，我有一些重复的内容。

我在这里有两个问题：

• 我想念什么？
• 当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

beforeEnter JavaScript钩子需要用于将目标元素opacity设置为0。

1. 在组件方法选项中创建beforeEnter方法。
2. 将侦听器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>