CSSRulePlugin插件

优质

小牛编辑

125浏览

2023-12-01

TweenMax没有包含CSSRulePlugin。CSSRulePlugin需要CSSPlugin支持，因此请确保已加载CSSPlugin。

CSSRulePlugin插件允许TweenLite和TweenMax为原始样式表规则设置动画，这些规则会影响页面上特定选择器的所有对象，而不是影响单个DOM元素的style（这是CSSPlugin的用途）。
例如，如果你有一个名为 ".myClass"的CSS类，设置 background-color 为 "#FF0000"，你可以补间成其他颜色，页面上所有使用".myClass"的对象将变化其背景色。通常，最好使用常规CSSPlugin为单个元素的css相关属性设置动画，以便您可以非常精确地控制每个对象，但有时替代全局规则本身也很有用。例如，伪元素（如 :after, :before等）不可能直接在JavaScript中引用，但你可以使用CSSRulePlugin为它们设置动画。

动画关键词：cssRule

CSSRulePlugin插件有一个静态方法getRule()，你可以使用该方法根据你在CSS中使用的选择器获取样式表的引用。例如，假设你有这样的CSS：

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

现在假设你要将.myClass:before 的颜色补间成蓝色，则可以执行以下操作：

var rule = CSSRulePlugin.getRule(".myClass:before"); //获取规则
TweenLite.to(rule, 3, {cssRule:{color:"#0000FF"}});//补间该规则

如果你想获得所有在伪元素:before的样式规则，getRule()将返回它们的数组，你可以这样做：

TweenLite.to( CSSRulePlugin.getRule(":before"), 3, {cssRule:{color:"#0000CC"}});

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

TweenLite.to(CSSRulePlugin.getRule(":before"), 3, {cssRule:{color:"#0000CC"}});

重播

在对规则补间之前最好先定义好该规则，例如你要动画背景色，应先在CSS中定义该颜色的初始值。或者使用fromTo()方法，这样就不用猜测之前没有定义的起始值是什么。

媒体查询中定义的样式可能无法访问/补间。