javascript - 两个页面之间的转换不适用于 vue.js 和 GSAP
问题描述
我已经开始学习 vue.js,我想在两个页面之间使用 GSAP(而不是 css)进行转换,所以我找到了这些属性 : v-on:enter
, v-on:leave
.
看来我的v-on:enter
动画只在我的应用程序的第一次调用中起作用。我没有看到“离开”动画,而且当新页面出现时我有一些重复的内容。
我在这里有两个问题:
- 我错过了什么?
v-on:enter
当 DOM 完全加载时,如何启动我的动画?(到目前为止,即使我的 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>
解决方案
- 使用
out-in
过渡模式首先将当前视图过渡出去,然后在完成后,新视图过渡进来。 beforeEnter
在您的组件方法选项中创建一个方法以将目标元素设置opacity
为0
.- 通过添加到
组件来监听
beforeEnter
JavaScript 钩子。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>
推荐阅读
- powershell - 在 helm install 中执行命令
- sql - 如何在 SQL 中创建查询以获取以前的日期?
- python - 在搜索大量字符串时,如何加快电子邮件查找正则表达式的速度?
- node.js - 更新文档时如何捕捉猫鼬错误
- scala - 生成身份验证令牌并在 Gatling 的整个会话中使用它
- javascript - 在 Jest 中模拟 requestAnimationFrame
- html - 如何更改过渡“outro”?(CSS 变换)
- python - Python OpenPyxl:从按列排列的数据创建折线图
- excel - “运行时错误”-2147417848 (80010108) 自动化错误:调用的对象已与其客户端断开连接”
- r - 使用 R 从 FTP 下载或连接 csv 数据