时间戳

首页 > 解决方案 > 与 Greensock 反应 - 请 gsap.registerPlugin(CSSPlugin, CSSRulePlugin)

javascript - 与 Greensock 反应 - 请 gsap.registerPlugin(CSSPlugin, CSSRulePlugin)

问题描述

我正在尝试使用 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, CSSRulePlugin)

标签： javascriptcssreactjsfrontendgsap

解决方案

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

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

gsap.registerPlugin(CSSRulePlugin);

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

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

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

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

GSAP 的文档应该能够回答大多数这样的问题:)

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

推荐阅读