与 Greensock 反应 - 请 gsap.registerPlugin(CSSPlugin, Cs-s-rulePlugin)

Posted 2023-02-22

【中文标题】与 Greensock 反应 - 请 gsap.registerPlugin(CSSPlugin, Cs-s-rulePlugin)

【英文标题】：React with Greensock - Please gsap.registerPlugin(CSSPlugin, Cs-s-rulePlugin)

【发布时间】：2020-06-12 19:49:04

【问题描述】：

我正在尝试使用 Greensock 和 React.js 制作显示图像效果，但我收到了与 CSS 插件相关的警告。

首先，我需要获取要为显示效果制作动画的伪元素的规则

  const imageReveal = CSSPluginRule.getRule("#image-container:after");

下一步是为宽度设置动画

 tl.to(container.current, 1,  css:  visibility: "visible"  ).to(
      imageReveal,
      1.5,
       css:  width: "0%", ease: Power2.easeIn  
    );

动画不工作，我想知道问题是否是因为这个警告：

Please gsap.registerPlugin(CSSPlugin, Cs-s-rulePlugin) 

【参考方案1】：

发生此错误是因为您没有导入和注册 Cs-s-rulePlugin，正如警告所述。您不必注册 CSSPlugin，因为它是 GSAP 核心的一部分。要导入和注册 Cs-s-rulePlugin，请在脚本顶部包含以下内容：

import  gsap  from "gsap";
import  Cs-s-rulePlugin  from "gsap/Cs-s-rulePlugin";

gsap.registerPlugin(Cs-s-rulePlugin);

我强烈建议您使用 GSAP 的 Install Helper，直到您对导入/注册格式感到满意为止。

旁注，大多数时候您不需要在补间内显式使用css 对象。 GSAP 检测到它是一个 DOM 对象，如果它识别出它是一个 DOM 对象，它就会尝试使用 CSSPlugin。 visibility 也不是动画属性，所以你应该使用 .set() 代替：

tl.set(container.current,  visibility: "visible" )
.to(imageReveal,  duration: 1, cssRule:  width: "0%" , ease: "power2.in" );

请注意，您使用cssRule 对象来影响使用.getRule 获得的内容另请注意，为了方便起见，我还使用了压缩字符串形式，因此您也不必导入它。如果可以的话，最好使用scaleX 而不是width，因为使用transforms 不会像改变元素的宽度那样导致回流。

GSAP's docs 应该能够回答大多数这样的问题:)

另外请注意，我们 GreenSock 不建议在大多数情况下使用 Cs-s-rulePlugin。相反，我们建议为实际元素（不是伪元素）或 CSS 变量设置动画。

【讨论】：

谢谢。我是 Greensock 的初学者，那么我们需要注册什么类似 Cs-s-rulePlugin 的东西？

@LauraBeatris 您只需在导入后使用registerPlugin 命令，如我的答案和安装助手所示。