我已经开始学习 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>
最佳答案
- 使用
出入
transition mode先移出当前 View ,然后在完成后移入新 View 。 - 在组件方法选项中创建一个
beforeEnter
方法,将目标元素opacity
设置为0
。 - 听
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/