onMount不会第二次被打电话
我正在SvelteKit和Gsap + scrollTrigger中建立一个简单的网站。其结构如下: Startpage / About / Services / Contact
在整个网站，我使用许多简单的动画SVG，文本和其他元素。一切似乎都很好，但当我在页面之间来回移动时，我注意到网页确实在减速，最终开始崩溃。刷新浏览器之后，一切都好起来了，…(直到我再次开始在页面之间导航)。我发现我需要在页面转换时杀死GSAP ScrollTriggers，并重新初始化它们。
所以我杀死了scrollTriggers，但是现在出现了一个新的问题:当我开始导航(比如从/about导航到/contact)并返回到以前访问过的页面时-- onMount不会再次被调用，我的所有动画都不会启动……我在所有的路径页面上都像这样使用gsap：
<script>
// GSAP
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js';
import { onMount, onDestroy } from 'svelte';
const init = () => {
// Title + Circles
let tlHero = gsap.timeline({
defaults: {duration: 1, ease: "power2"},
scrollTrigger: {
trigger: ".index h1",
toggleActions: "restart none restart none",
}
});
tlHero
.from(".index h1", {x: 40, delay:0.3)
.from(".hero-c2", {duration: 0.8, scale:0.1, transformOrigin:"50% 100%"})
.from(".hero-c3", {y:-31, delay:0.3})
.from(".hero-c1", {y:32}, "-=1")
// Titles - .lists sections
const sections = gsap.utils.toArray('.lists section');
sections.forEach((section) => {
gsap.from(section, {
x:100,
duration: 2,
stagger:5,
ease: 'power4',
opacity:0,
scrollTrigger: {
trigger: section,
toggleActions: 'restart none none reverse',
start: 'top 80%',
}
});
});
// … and here several other animations…
};
onMount(() => {
gsap.registerPlugin(ScrollTrigger);
init();
});
onDestroy(() => {
ScrollTrigger.getAll().forEach(trigger => trigger.kill());
});
</script>当我导航到其中一个页面时，我在console.log中签入了onMount和onDestroy是否会触发。结果如下：
// Navigating to /routes/index.svelte
index.svelte-016bdddb.js:1 ScrollTriggers before mount 1
index.svelte-016bdddb.js:1 ScrollTriggers after mount 3
// Navigating to /routes/contact/index.svelte
index.svelte-016bdddb.js:1 ScrollTriggers before mount 5
index.svelte-016bdddb.js:1 ScrollTriggers after mount 7
index.svelte-a4654da6.js:1 ScrollTriggers before mount 9
index.svelte-a4654da6.js:1 ScrollTriggers after mount 10
index.svelte-016bdddb.js:1 ScrollTriggers before destroy 10
index.svelte-016bdddb.js:1 ScrollTriggers after destroy 0
index.svelte-016bdddb.js:1 ScrollTriggers before destroy 0
index.svelte-016bdddb.js:1 ScrollTriggers after destroy 0我不是编程方面的专家，SvelteKit和GSAP相结合对于我的项目…来说似乎是一个很好的选择。但现在我被困住了-/
我很感谢你的帮助
回答 2
Stack Overflow用户
发布于 2022-11-07 12:38:03
这就是svelte工具包的工作原理，如果您使用不同的段塞导航到同一个页面，那么组件将不会卸载--相反，svelte工具包将保持所有状态值不变以解决这个问题，您将需要使用afterNavigate钩子，并将其用于任何状态重置，或者在您的情况下调用gsap.registerPlugin(ScrollTrigger)；
Stack Overflow用户
发布于 2022-11-07 12:51:55
我认为这里的问题是，您正在onMount()钩子中注册onMount()。GSAP插件应该在全球注册。因此，您应该注册ScrollTrigger或任何其他插件以外的您的主要功能，但只要你的应用程序级js文件。例如，请试试这个。
// GSAP
import { gsap } from 'gsap/dist/gsap.js'; // Try using this path instead
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js';
import { onMount, onDestroy } from 'svelte';
gsap.registerPlugin(ScrollTrigger); // Try registering it like this
const init = () => {
// your init function code
}否则，只需尝试使用带有ScrollTrigger标记的<script>。
https://stackoverflow.com/questions/69237890
复制相似问题
腾讯云开发者
