CSSRulePlugin插件
优质
小牛编辑
135浏览
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()
方法,这样就不用猜测之前没有定义的起始值是什么。
媒体查询中定义的样式可能无法访问/补间。