在React.js / Gatsby.js中使用gsap定位动画的类名是一种好习惯

问题描述

我已经阅读了gsap文档以进行反应集成，它建议使用useRef()来定位要设置动画的元素，例如：

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

但是，这非常不灵活，因为ref仅限于组件的文件。在gsap中，您趋向于像gsap.timeline()那样在网站上定位多个元素，因此几乎不可能在没有复杂逻辑（例如使用上下文api）的情况下定位来自多个组件的多个引用。

所以我想知道在react中使用老式的方法来定位具有class名称的元素是正确的方法吗？

就像在useEffect中一样：

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

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

任何人都可以鸣叫吗？

解决方法

通常，您应该避免使用泛型选择器字符串（正在执行的操作）作为React中补间的目标。您之所以想这样做的部分原因是因为它反应不灵敏，并且没有严格按照自己的要求保留组件。其次，window引用可能并不总是存在，因此在某些情况下会引发警告（或错误，具体取决于您的代码）。

尝试坚持使用引用，并选择使用该引用中的选择器。这样做可以为您提供两全其美的优势：

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

如果必须使用通用选择器字符串，请进行测试，测试，然后在多种不同情况下再次对其进行测试。从动画的角度来看，性能可能不会受到影响，但是请确保清理垃圾，因为如果您不杀死componentUnmount上的动画，那真的会使站点陷入困境。

对于React + GSAP this article的一般介绍是一个不错的起点。

gsap javascript reactjs reactjs