98 lines
10 KiB
HTML
Executable File
98 lines
10 KiB
HTML
Executable File
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- saved from url=(0014)about:internet --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="../../../style.css" type="text/css" media="screen"><link rel="stylesheet" href="../../../print.css" type="text/css" media="print"><link rel="stylesheet" href="../../../override.css" type="text/css"><meta name="keywords" content="CSSRulePlugin,com.greensock.plugins.CSSRulePlugin,bezierThrough,cubicToQuadratic,getRule,quadraticToCubic"><title>com.greensock.plugins.CSSRulePlugin</title></head><body><script language="javascript" type="text/javascript" src="../../../asdoc.js"></script><script language="javascript" type="text/javascript" src="../../../help.js"></script><script language="javascript" type="text/javascript" src="../../../cookies.js"></script><script language="javascript" type="text/javascript"><!--
|
|
asdocTitle = 'CSSRulePlugin - GreenSock JavaScript Documentation';
|
|
var baseRef = '../../../';
|
|
window.onload = configPage;
|
|
--></script>
|
|
<script type="text/javascript">
|
|
scrollToNameAnchor();
|
|
</script><table class="titleTable" cellpadding="0" cellspacing="0" id="titleTable" style="display:none"><tr><td class="titleTableTitle" align="left">GreenSock JavaScript API Docs</td><td class="titleTableTopNav" align="right"><a href="../../../package-summary.html" onclick="loadClassListFrame('../../../all-classes.html')">All Packages</a> | <a href="../../../class-summary.html" onclick="loadClassListFrame('../../../all-classes.html')">All Classes</a> | <a href="../../../all-index-A.html" onclick="loadClassListFrame('../../../index-list.html')">Index</a> | <a id="framesLink1" href="../../../index.html?com/greensock/plugins/CSSRulePlugin.html&com/greensock/plugins/class-list.html">Frames</a><a id="noFramesLink1" style="display:none" href="" onclick="parent.location=document.location"> No Frames </a></td><td class="titleTableLogo" align="right" rowspan="3"><img src="../../../images/logo.jpg" class="logoImage" alt=" Adobe Logo " title=" Adobe Logo "></td></tr><tr class="titleTableRow2"><td class="titleTableSubTitle" id="subTitle" align="left">CSSRulePlugin</td><td class="titleTableSubNav" id="subNav" align="right"><a href="#methodSummary">Methods</a></td></tr><tr class="titleTableRow3"><td colspan="3"> </td></tr></table><script language="javascript" type="text/javascript" xml:space="preserve">
|
|
<!--
|
|
|
|
if (!isEclipse() || window.name != ECLIPSE_FRAME_NAME) {titleBar_setSubTitle("CSSRulePlugin"); titleBar_setSubNav(false,false,false,false,false,false,false,false,true,false,false ,false,false,false,false,false);}
|
|
-->
|
|
</script><div xmlns:fn="http://www.w3.org/2005/xpath-functions" class="MainContent"><table class="classHeaderTable" cellpadding="0" cellspacing="0"><tr><td class="classHeaderTableLabel">Package</td><td><a href="package-detail.html" onclick="javascript:loadClassListFrame('class-list.html')">com.greensock.plugins</a></td></tr><tr><td class="classHeaderTableLabel">Class</td><td class="classSignature">public class CSSRulePlugin</td></tr><tr><td class="classHeaderTableLabel">Inheritance</td><td class="inheritanceList">CSSRulePlugin <img src="../../../images/inherit-arrow.gif" title="Inheritance" alt="Inheritance" class="inheritArrow"> <a href="../../../com/greensock/plugins/TweenPlugin.html">TweenPlugin</a> <img src="../../../images/inherit-arrow.gif" title="Inheritance" alt="Inheritance" class="inheritArrow"> Object</td></tr></table><p></p><p></p><p></p>
|
|
Allows TweenLite and TweenMax to animate the raw <b>style sheet rules</b> which affect all objects of a particular selector
|
|
rather than affecting an individual DOM element's <code>style</code> (that's what the CSSPlugin is for). For example, if you have
|
|
a CSS class named <code>".myClass"</code> that sets <code>background-color</code> to <code>"#FF0000"</code>, you could tween that
|
|
to a different color and ALL of the objects on the page that use <code>".myClass"</code> 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 <code>:after, :before,</code> etc. are impossible to reference directly in JavaScript, but you can animate
|
|
them using CSSRulePlugin. <b>
|
|
<i>NOTE: CSSRulePlugin requires the CSSPlugin, so please make sure it is loaded too.</i>
|
|
</b>
|
|
|
|
<p>The plugin itself actually has a static <b>
|
|
<code>getRule()</code>
|
|
</b> 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:</p>
|
|
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
.myClass {
|
|
color:#FF0000;
|
|
}
|
|
.myClass:before {
|
|
content:"This content is before.";
|
|
color:#00FF00;
|
|
}
|
|
</pre></div>
|
|
|
|
<p>Now let's say you want to tween the color of the <code>.myClass:before</code> to blue. Make sure you load the
|
|
CSSRulePlugin and CSSPlugin JavaScript files and then you can do this:</p>
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
var rule = CSSRulePlugin.getRule(".myClass:before"); //get the rule
|
|
TweenLite.to(rule, 3, {cssRule:{color:"#0000FF"}});
|
|
</pre></div>
|
|
|
|
<p>And if you want to get <b>ALL</b> of the :before pseudo elements, the <code>getRule()</code> will return an array of them, so I could do this:</p>
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
TweenLite.to( CSSRulePlugin.getRule(":before"), 3, {cssRule:{color:"#0000CC"}});
|
|
</pre></div>
|
|
|
|
<p>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 <code>.myClass:before</code> 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
|
|
<code>fromTo()</code>. That way there's no having to guess what the starting value should be when it isn't defined previously.</p>
|
|
|
|
<p>Don't forget to wrap the values in a <code>cssRule:{}</code> object.</p>
|
|
|
|
<p>
|
|
<b>Copyright 2008-2012, GreenSock. All rights reserved.</b> This work is subject to the terms in <a href="http://www.greensock.com/terms_of_use.html" target="">http://www.greensock.com/terms_of_use.html</a> or for <a href="http://www.greensock.com/club/" target="">Club GreenSock</a> members, the software agreement that was issued with the membership.</p>
|
|
|
|
<p></p><br/><hr></div><a name="methodSummary"></a><div class="summarySection"><div class="summaryTableTitle">Public Methods </div><table cellspacing="0" cellpadding="3" class="summaryTable " id="summaryTableMethod"><tr><th> </th><th colspan="2">Method</th><th class="summaryTableOwnerCol">Defined By</th></tr><tr class=""><td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><div class="summarySignature"><a href="#getRule()" class="signatureLink">getRule</a>(selector:String):Object</div><div class="summaryTableDescription">[static]
|
|
Provides a simple way to find the style sheet object associated with a particular selector like ".myClass" or "#myID".</div></td><td class="summaryTableOwnerCol">CSSRulePlugin</td></tr></table></div><script language="javascript" type="text/javascript"><!--
|
|
showHideInherited();
|
|
--></script><div class="MainContent"><a name="methodDetail"></a><div class="detailSectionHeader">Method Detail</div><a name="getRule()"></a><a name="getRule(String)"></a><table class="detailHeader" cellpadding="0" cellspacing="0"><tr><td class="detailHeaderName">getRule</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td></tr></table><div class="detailBody"><code> public static function getRule(selector:String):Object</code><p></p><p></p><p>
|
|
Provides 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:
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
.myClass {
|
|
color:#FF0000;
|
|
}
|
|
.myClass:before {
|
|
content:"This content is before.";
|
|
color:#00FF00;
|
|
}
|
|
</pre></div>
|
|
|
|
<p>And you want to tween the color of the <code>.myClass:before</code> to blue. Make sure you load the
|
|
CSSRulePlugin.js file and then you can do this:</p>
|
|
|
|
<div class="listing" version="3.0"><pre>
|
|
var rule = CSSRulePlugin.getRule(".myClass:before"); //get the rule
|
|
TweenLite.to(rule, 3, {cssRule:{color:"#0000FF"}});
|
|
</pre></div>
|
|
|
|
<p>Or you can feed the value directly into the tween like this:</p>
|
|
<div class="listing" version="3.0"><pre>
|
|
TweenLite.to( CSSRulePlugin.getRule(".myClass:before"), 3, {cssRule:{color:"#0000FF"}});
|
|
</pre></div>
|
|
|
|
</p><p><span class="label"> Parameters </span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20px"></td><td><code><span class="label">selector</span>:String</code> — The name that exactly matches the selector you want to animate (like ".myClassName").
|
|
</td></tr></table></p><p></p><span class="label">Returns</span><table cellpadding="0" cellspacing="0" border="0"><tr><td width="20"></td><td><code>Object</code> — The style sheet object (or an array of them if you define only a pseudo element selector like <code>:before</code>)
|
|
</td></tr></table></div><br/><br/><hr><br/><p></p><center class="copyright"><footer></footer><br/>Thu Dec 20 2012, 04:30 PM -06:00 </center></div></body></html><!--<br/>Thu Dec 20 2012, 04:30 PM -06:00 --> |