gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 19:07:49 25 4
gpt4 key购买 nike

我已经开始学习 vue.js,我想在两个页面之间使用 GSAP(而不是 css)进行转换,所以我找到了这些属性:v-on:enterv-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>

最佳答案

  1. 使用出入 transition mode先移出当前 View ,然后在完成后移入新 View 。
  2. 在组件方法选项中创建一个 beforeEnter 方法,将目标元素 opacity 设置为 0
  3. beforeEnter JavaScript hook通过添加 v-on:before-enter="beforeEnter"transition 组件。

除非有充分的理由使用 body 作为目标元素,否则请改用 View 组件 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>

关于javascript - 两个页面之间的转换不适用于 vue.js 和 GSAP,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58804900/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com