在 React.js/Gatsby.js 中使用 gsap 为动画定位 class 名称是一种好习惯吗

Question

我已经阅读了有关反应集成的 gsap 文档，它建议使用 useRef()s 来定位要动画的元素，如下所示：

const ref = useRef()
gsap.to(ref, {...})

但是，这非常不灵活，因为引用仅限于组件的文件。在 gsap 中，您倾向于像使用 gsap.timeline() 一样定位网站周围的多个元素，因此如果没有像使用上下文 api.

这样的复杂逻辑，几乎不可能从多个组件定位多个引用

所以我想知道在 React 中使用带有 class 名称的定位元素的老式方法是否是正确的方法？

就像在 useEffect:

里面一样

gsap.from('.foo', {...})

因为使用 class 名称似乎是在处理直接 dom 操作，这似乎是一种不好的做法。

有人可以插话吗？

Answer 1

一般来说，你应该避免使用通用选择器字符串（你正在做的）作为 React 中补间的目标。您想要这样做的部分原因是因为它反应不是很灵敏，并且不会将组件严格地保留给它们自己。其次，window 引用可能并不总是存在，因此在某些情况下它会抛出警告（或错误，具体取决于您的代码）。

尝试坚持使用 refs 并有选择地使用来自该 ref 的选择器。这样做可以让您两全其美：

const theRef = useCallback((node) => {
  if (!node) return;
  const spans = node.querySelectorAll('span')
  gsap.to(spans, { autoAlpha: 1})
},[])
...
<div ref={theRef}>
  <span />
  <span />
  <span />
</div>

如果你必须使用通用选择器字符串，测试，测试，然后在一堆不同的情况下再次测试它。从动画的角度来看，可能不会影响性能，但请确保清理垃圾，因为如果您不在 componentUnmounts.

上停止动画，那确实会使站点陷入困境

对于 React + GSAP 的非常一般的介绍，this article 是一个很好的起点。

在 React.js/Gatsby.js 中使用 gsap 为动画定位 class 名称是一种好习惯吗

Is it good practice to target class names for animations with gsap in React.js/Gatsby.js

javascript

reactjs

gsap