跳过主要内容

CSSRulePlugin.getRule

CSSRulePlugin.getRule( selector:String ) : Object

[静态] 提供了一种简便的方法来查找与特定选择器相关的样式表对象,例如".myClass"或者"#myID".

参数

  • 选择器:字符串

    完全匹配你想要动画化的选择器的名称(例如".myClassName")。

返回值:对象

样式表对象(或者如果你仅定义了一个伪元素选择器,如::before)。

细节

提供了一种简便方式来查找与特定选择器(例如.myClass或者#myID。你可以使用此方法来确定你的补间动画的目标。

例如,假设你有如下 CSS:

.myClass {
color: #FF0000;
}
.myClass::before {
content: "This content is before.";
color: #00FF00;
}

并且你想对.myClass::before设置为blue。请确保加载了CSSRulePlugin.js文件,然后你可以这样操作:

var rule = CSSRulePlugin.getRule(".myClass::before"); //get the rule
gsap.to(rule, {duration: 3, cssRule: {color: "#0000FF"}});

或者你可以直接将值传入补间动画中,如下所示:

gsap.to(CSSRulePlugin.getRule(".myClass::before"), {
duration: 3,
cssRule: { color: "#0000FF" },
});
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗