CSSRulePlugin插件

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

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

365体育官网-ribo88_365手机体育投注_365体育在线国外网址关键词: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"}});
  • HTML
  • CSS
  • JS
  • 展示

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

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

在对规则补间之前最好先定义好该规则,例如你要365体育官网-ribo88_365手机体育投注_365体育在线国外网址背景色,应先在CSS中定义该颜色的初始值。或者使用fromTo()方法,这样就不用猜测之前没有定义的起始值是什么。

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