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

2024-05-03 • 问答

我已经开始学习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,{opacity:0,onComplete:done});
    }   
  }
}
</script>

使用out-in transition mode首先移出当前视图，然后在完成后移入新视图。
在组件方法选项中创建一个beforeEnter方法，以将目标元素opacity设置为0。
通过向beforeEnter添加v-on:before-enter="beforeEnter"来收听transition JavaScript hook 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,{ opacity:0,onComplete:done }); } } } </script>。

修改后的代码：

Column(
    children: <Widget>[
        cardGen(),...

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

zhang20045237 回答：两个页面之间的过渡不适用于vue.js和GSAP

大家都在问