| Package | com.greensock.plugins |
| Class | public class CSSRulePlugin |
| Inheritance | CSSRulePlugin  TweenPlugin Object |
style (that's what the CSSPlugin is for). For example, if you have
a CSS class named ".myClass" that sets background-color to "#FF0000", you could tween that
to a different color and ALL of the objects on the page that use ".myClass" would have their background color change.
Typically it is best to use the regular CSSPlugin to animate css-related properties of individual elements so that you can get
very precise control over each object, but sometimes it can be useful to tween the global rules themselves instead. For example,
pseudo elements (like :after, :before, etc. are impossible to reference directly in JavaScript, but you can animate
them using CSSRulePlugin.
NOTE: CSSRulePlugin requires the CSSPlugin, so please make sure it is loaded too.
The plugin itself actually has a static
getRule()
method that you can use to grab a reference to the style sheet
itself based on the selector you used in your CSS. For example, let's say you have CSS like this:
.myClass {
color:#FF0000;
}
.myClass:before {
content:"This content is before.";
color:#00FF00;
}
Now let's say you want to tween the color of the .myClass:before to blue. Make sure you load the
CSSRulePlugin and CSSPlugin JavaScript files and then you can do this:
var rule = CSSRulePlugin.getRule(".myClass:before"); //get the rule
TweenLite.to(rule, 3, {cssRule:{color:"#0000FF"}});
And if you want to get ALL of the :before pseudo elements, the getRule() will return an array of them, so I could do this:
TweenLite.to( CSSRulePlugin.getRule(":before"), 3, {cssRule:{color:"#0000CC"}});
Keep in mind that it is typically best to tween a property that has already been defined in the specific rule that you're selecting
because it cannot perform a calculated style (the combination of styles from other selectors that might pertain to similar elements).
For example, if we didn't define any color initially for the .myClass:before and tried to tween its color to blue, it would
start transparent and go to blue. One way around this is to simply set your starting values explicitly in the tween by doing a
fromTo(). That way there's no having to guess what the starting value should be when it isn't defined previously.
Don't forget to wrap the values in a cssRule:{} object.
Copyright 2008-2012, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html or for Club GreenSock members, the software agreement that was issued with the membership.
| Method | Defined By | ||
|---|---|---|---|
getRule(selector:String):Object [static]
Provides a simple way to find the style sheet object associated with a particular selector like ".myClass" or "#myID". | CSSRulePlugin | ||
| getRule | () | method |
public static function getRule(selector:String):ObjectProvides a simple way to find the style sheet object associated with a particular selector like ".myClass" or "#myID". You'd use this method to determine the target of your tween. For example, let's say you have CSS like this:
.myClass {
color:#FF0000;
}
.myClass:before {
content:"This content is before.";
color:#00FF00;
}
And you want to tween the color of the .myClass:before to blue. Make sure you load the
CSSRulePlugin.js file and then you can do this:
var rule = CSSRulePlugin.getRule(".myClass:before"); //get the rule
TweenLite.to(rule, 3, {cssRule:{color:"#0000FF"}});
Or you can feed the value directly into the tween like this:
TweenLite.to( CSSRulePlugin.getRule(".myClass:before"), 3, {cssRule:{color:"#0000FF"}});
Parameters
selector:String — The name that exactly matches the selector you want to animate (like ".myClassName").
|
Object — The style sheet object (or an array of them if you define only a pseudo element selector like :before)
|