跳过主要内容

CSSRule

警告

CSSRulePlugin 已经被弃用以支持使用现在拥有良好浏览器支持的 CSS 变量。当今良好的浏览器支持。GSAP 原生支持动画化 CSS 变量，比如：

gsap.to("html", { "--my-variable": 100, duration: 2 });

CSS 变量演示：

加载中...

请注意，无论你操作的是哪个属性，当动画化一个 CSS 变量时，都会触发页面重绘，因此应谨慎使用，并注意性能问题。

允许 GSAP 动画化原始样式表规则，这会影响特定选择器下的所有对象，而不是影响单个 DOM 元素的内联样式。

例如，如果你有一个名为myClass的 CSS 类background-color设置为#FF0000，你可以将颜色 tween 到另一种颜色，并且所有页面上具有myClass类的所有对象的背景色都将改变。通常最好使用常规的 CSSPlugin 来动画化单个元素的 CSS 相关属性，以便更精确地控制每个对象，但有时直接动画化全局规则也是有用的。例如，::after和::before伪元素无法在 JavaScript 中直接引用，

插件本身有一个静态的getRule()方法，你可以通过基于 CSS 选择器来抓取对样式表本身的引用。

例如，假设你有如下 CSS：

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

如果你想 tween.myClass:before的颜色变成蓝色。确保加载了 CSSRulePlugin 文件，然后执行以下代码：

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

如果你还想获取所有的::before伪元素，getRule()将返回包含它们的数组，所以我可以这样写：

gsap.to( CSSRulePlugin.getRule("::before"), {duration: 3, cssRule: {color: "blue"}});>

请记住，通常最好对你已明确在特定规则中定义过的属性进行 tween，因为它不能执行计算后的样式（即多个相关选择器组合在一起的样式）。例如，如果我们没有为.myClass::before显式定义任何初始颜色，并尝试将其颜色 tween 为蓝色，那么初始值会是transparent并过渡到blue。解决这个问题的一种方法是在 tween 中显式设置起始值，例如使用fromTo()这样就无需猜测未事先定义的初始值。

不要忘记将值包裹在cssRule: {}对象中。

定义在媒体查询内的样式可能无法访问或无法做 Tween 动画。

或者，可以将伪元素转换为真正的 HTML 元素，并像操作任何其他 DOM 元素一样直接对其进行动画处理。

方法​

CSSRulePlugin.getRule( selector:String ) : Object

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

目录