让TimelineLite只在盖茨比网站上玩一次

Question

我在盖茨比网站上设置了一个TimelineLite时间线，以便在用户导航到页面时为我的hero部分设置动画。然而，如果用户点击到当前页面的链接，即如果用户在主页上并点击到主页的链接，则它将重新加载页面并触发时间线再次运行。有没有办法确保我当前的链接在盖茨比内处于非活动状态？

英雄.tsx

import React, { useEffect, useRef, useState } from 'react';
import css from 'classnames';
import { ArrowButton } from 'components/arrow-button/ArrowButton';
import { HeadingReveal } from 'components/heading-reveal/HeadingReveal';
import { gsap, Power2, TimelineLite } from 'gsap';
import { RichText } from 'prismic-reactjs';
import htmlSerializer from 'utils/htmlSerializer';
import { linkResolver } from 'utils/linkResolver';
import s from './Hero.scss';
gsap.registerPlugin(TimelineLite, Power2);
export const Hero = ({ slice }: any) => {
const linkType = slice.primary.link._linkType;
const buttonLink =
linkType === 'Link.document' ? slice.primary.link._meta : slice.primary.link.url;
const theme = slice.primary.theme;
const image = slice.primary.image;
const contentRef = useRef(null);
const headingRef = useRef(null);
const copyRef = useRef(null);
const buttonRef = useRef(null);
const [tl] = useState(new TimelineLite({ delay: 0.5 }));
useEffect(() => {
tl.to(contentRef.current, { css: { visibility: 'visible' }, duration: 0 })
.from(headingRef.current, { y: 65, ease: Power2.easeOut, duration: 1 })
.from(copyRef.current, { opacity: 0, y: 20, ease: Power2.easeOut, duration: 1 }, 0.5)
.from(buttonRef.current, { opacity: 0, y: 10, ease: Power2.easeOut, duration: 1 }, 1);
}, [tl]);
return (
<div
className={css(s.hero, s[theme])}
style={{
background: image ? `url(${image.url})` : 'white',
}}
>
<div className={s.hero__container}>
<div className={s.content__left} ref={contentRef}>
<HeadingReveal tag="h1" headingRef={headingRef}>
{RichText.asText(slice.primary.heading)}
</HeadingReveal>
<div className={s.content__copy} ref={copyRef}>
{RichText.render(slice.primary.copy, linkResolver, htmlSerializer)}
</div>
<div className={s.content__button} ref={buttonRef}>
<ArrowButton href={buttonLink}>{slice.primary.button_label}</ArrowButton>
</div>
</div>

</div>
</div>
);
};

Answer 1

如果您使用内置的<Link>组件进行导航，则不应该进行这种导航，因为@reach/router在同一页面上导航时不会触发，也不会重新渲染。那里没有任何补液。

如果您使用的是锚点(<a>(，那么您正在刷新整个页面，这样您的所有组件都将再次被触发。

此外，在您的情况下，另一种可行的解决方法是使用带有空deps([](的useEffect，从而产生componentDidMount效果。在这种情况下，由于页面没有重新加载，因此不会再次触发：

const [tl] = useState(new TimelineLite({ delay: 0.5 }));
useEffect(() => {
tl.to(contentRef.current, { css: { visibility: 'visible' }, duration: 0 })
.from(headingRef.current, { y: 65, ease: Power2.easeOut, duration: 1 })
.from(copyRef.current, { opacity: 0, y: 20, ease: Power2.easeOut, duration: 1 }, 0.5)
.from(buttonRef.current, { opacity: 0, y: 10, ease: Power2.easeOut, duration: 1 }, 1);
return () => unmountFunction() // unmount to avoid infinite triggers
}, []);

注意：由于我不知道您的要求，您可能需要再做一些调整才能使代码正常工作。其想法是消除t1的依赖性以绕过该问题

为了避免无限触发，您可能还需要卸载带有return () => unmountFunction()的组件。