在 React 站点上使用 CSS 规则插件时未找到 GSAP 目标未定义

Question

我正在尝试使用 GSAP CSS 规则插件来定位伪选择器并对其进行动画处理。问题是它没有检测到它并记录GSAP target undefined not found到控制台。我尝试通过将元素记录到控制台来获取该元素，但它也是未定义的。

这是我的使用方法：

import { gsap } from "gsap"
import { CSSRulePlugin } from "gsap/CSSRulePlugin"

const IndexPage = () => {
  
  useEffect(() => {
    gsap.registerPlugin(CSSRulePlugin);
    const titleRule = CSSRulePlugin.getRule(
      "span.landing__title--span::after"
    )
    // Log titleRule
    console.log(titleRule). // undefined

    const tl = gsap.timeline();
    tl.to(
      titleRule,
      {
        cssRule: {
          scaleY: 0,
          duration: 1
        },
      }
    )
  },[])
  
  return (
    <div>
        <span className="landing__title--span">Hey there</span>
    </div>
  )
}

export default IndexPage

我做错了什么以及如何纠正？提前致谢

Answer 1

我终于找到了它不起作用的原因。当您使用 CSSRulePlugin 时，您必须非常具体地了解您的选择器。

您在 getRule() 中使用的选择器在很大程度上取决于您在 CSS 中使用的选择器（因为它将更改此特定规则）。

例如，如果您在 CSS 中使用landing__title--span::after并在 getRule() 中引用span.landing__title--span::after，则它将不起作用。getRule() 中的选择器必须与 css 中的选择器匹配，因为这就是它想要覆盖的内容。

所以在你的CSS中，如果你的风格是这样的：

.landing__title--span::after {
  /*Yout styles*/
}

你的 getRule 必须这样定义：

const titleRule = CSSRulePlugin.getRule(
  ".landing__title--span::after"
)