307 lines
16 KiB
HTML
Executable file
307 lines
16 KiB
HTML
Executable file
<a href="http://github.com/angular/angular.js/tree/v1.2.0rc1/src/ngAnimate/animate.js#L233" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ngAnimate/animate.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">$animate</code>
|
|
<div><span class="hint">service in module <code ng:non-bindable="">ngAnimate</code>
|
|
</span>
|
|
</div>
|
|
</h1>
|
|
<div><h2 id="Description">Description</h2>
|
|
<div class="description"><div class="nganimate-animate-page"><p>The <code>$animate</code> service provides animation detection support while performing DOM operations (enter, leave and move)
|
|
as well as during addClass and removeClass operations. When any of these operations are run, the $animate service
|
|
will examine any JavaScript-defined animations (which are defined by using the $animateProvider provider object)
|
|
as well as any CSS-defined animations against the CSS classes present on the element once the DOM operation is run.</p>
|
|
<p>The <code>$animate</code> service is used behind the scenes with pre-existing directives and animation with these directives
|
|
will work out of the box without any extra configuration.</p>
|
|
<p>Requires the <a href="api/ngAnimate"><code>ngAnimate</code></a> module to be installed.</p>
|
|
<p>Please visit the <a href="api/ngAnimate"><code>ngAnimate</code></a> module overview page learn more about how to use animations in your application.</p>
|
|
</div></div>
|
|
<h2 id="Dependencies">Dependencies</h2>
|
|
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$timeout,">$timeout,</a></code>
|
|
<div class="nganimate-animate-page"><p>$sniffer, $rootElement</p>
|
|
</div></li>
|
|
</ul>
|
|
<div class="member method"><h2 id="Methods">Methods</h2>
|
|
<ul class="methods"><li><h3 id="addClass">addClass(element, className, done)</h3>
|
|
<div class="addclass"><div class="nganimate-animate-addclass-page"><p>Triggers a custom animation event based off the className variable and then attaches the className value to the element as a CSS class.
|
|
Unlike the other animation methods, the animate service will suffix the className value with <a href="#" class="label type-hint type-hint--add">-add</a> in order to provide
|
|
the animate service the setup and active CSS classes in order to trigger the animation (this will be skipped if no CSS transitions
|
|
or keyframes are defined on the -add CSS class).</p>
|
|
<p>Below is a breakdown of each step that occurs during addClass animation:</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Animation Step</th>
|
|
<th>What the element class attribute looks like</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1. $animate.addClass(element, 'super') is called</td>
|
|
<td>class=""</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2. $animate runs any JavaScript-defined animations on the element</td>
|
|
<td>class=""</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3. the .super-add class is added to the element</td>
|
|
<td>class="super-add"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4. $animate scans the element styles to get the CSS transition/animation duration and delay</td>
|
|
<td>class="super-add"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5. the .super-add-active class is added (this triggers the CSS transition/animation)</td>
|
|
<td>class="super-add super-add-active"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>6. $animate waits for X milliseconds for the animation to complete</td>
|
|
<td>class="super-add super-add-active"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>7. The animation ends and both CSS classes are removed from the element</td>
|
|
<td>class=""</td>
|
|
</tr>
|
|
<tr>
|
|
<td>8. The super class is added to the element</td>
|
|
<td>class="super"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>9. The done() callback is fired (if provided)</td>
|
|
<td>class="super"</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-addclass-page"><p>the element that will be animated</p>
|
|
</div></td></tr><tr><td>className</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="nganimate-animate-addclass-page"><p>the CSS class that will be animated and then attached to the element</p>
|
|
</div></td></tr><tr><td>done <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="nganimate-animate-addclass-page"><p>callback function that will be called once the animation is complete</p>
|
|
</div></td></tr></tbody></table></div>
|
|
</li>
|
|
<li><h3 id="enabled">enabled(value)</h3>
|
|
<div class="enabled"><div class="nganimate-animate-enabled-page"><p>Globally enables/disables animations.</p>
|
|
</div><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>value <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="nganimate-animate-enabled-page"><p>If provided then set the animation on or off.</p>
|
|
</div></td></tr></tbody></table><h5 id="returns">Returns</h5><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="nganimate-animate-enabled-page"><p>Current animation state.</p>
|
|
</div></td></tr></table></div>
|
|
</li>
|
|
<li><h3 id="enter">enter(element, parent, after, done)</h3>
|
|
<div class="enter"><div class="nganimate-animate-enter-page"><p>Appends the element to the parent element that resides in the document and then runs the enter animation. Once
|
|
the animation is started, the following CSS classes will be present on the element for the duration of the animation:</p>
|
|
<p>Below is a breakdown of each step that occurs during enter animation:</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Animation Step</th>
|
|
<th>What the element class attribute looks like</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1. $animate.enter(...) is called</td>
|
|
<td>class="my-animation"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2. element is inserted into the parent element or beside the after element</td>
|
|
<td>class="my-animation"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3. $animate runs any JavaScript-defined animations on the element</td>
|
|
<td>class="my-animation"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4. the .ng-enter class is added to the element</td>
|
|
<td>class="my-animation ng-enter"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5. $animate scans the element styles to get the CSS transition/animation duration and delay</td>
|
|
<td>class="my-animation ng-enter"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>6. the .ng-enter-active class is added (this triggers the CSS transition/animation)</td>
|
|
<td>class="my-animation ng-enter ng-enter-active"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>7. $animate waits for X milliseconds for the animation to complete</td>
|
|
<td>class="my-animation ng-enter ng-enter-active"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>8. The animation ends and both CSS classes are removed from the element</td>
|
|
<td>class="my-animation"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>9. The done() callback is fired (if provided)</td>
|
|
<td>class="my-animation"</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-enter-page"><p>the element that will be the focus of the enter animation</p>
|
|
</div></td></tr><tr><td>parent</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-enter-page"><p>the parent element of the element that will be the focus of the enter animation</p>
|
|
</div></td></tr><tr><td>after</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-enter-page"><p>the sibling element (which is the previous element) of the element that will be the focus of the enter animation</p>
|
|
</div></td></tr><tr><td>done <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="nganimate-animate-enter-page"><p>callback function that will be called once the animation is complete</p>
|
|
</div></td></tr></tbody></table></div>
|
|
</li>
|
|
<li><h3 id="leave">leave(element, done)</h3>
|
|
<div class="leave"><div class="nganimate-animate-leave-page"><p>Runs the leave animation operation and, upon completion, removes the element from the DOM. Once
|
|
the animation is started, the following CSS classes will be added for the duration of the animation:</p>
|
|
<p>Below is a breakdown of each step that occurs during enter animation:</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Animation Step</th>
|
|
<th>What the element class attribute looks like</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1. $animate.leave(...) is called</td>
|
|
<td>class="my-animation"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2. $animate runs any JavaScript-defined animations on the element</td>
|
|
<td>class="my-animation"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3. the .ng-leave class is added to the element</td>
|
|
<td>class="my-animation ng-leave"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4. $animate scans the element styles to get the CSS transition/animation duration and delay</td>
|
|
<td>class="my-animation ng-leave"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5. the .ng-leave-active class is added (this triggers the CSS transition/animation)</td>
|
|
<td>class="my-animation ng-leave ng-leave-active</td>
|
|
</tr>
|
|
<tr>
|
|
<td>6. $animate waits for X milliseconds for the animation to complete</td>
|
|
<td>class="my-animation ng-leave ng-leave-active</td>
|
|
</tr>
|
|
<tr>
|
|
<td>7. The animation ends and both CSS classes are removed from the element</td>
|
|
<td>class="my-animation"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>8. The element is removed from the DOM</td>
|
|
<td>...</td>
|
|
</tr>
|
|
<tr>
|
|
<td>9. The done() callback is fired (if provided)</td>
|
|
<td>...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-leave-page"><p>the element that will be the focus of the leave animation</p>
|
|
</div></td></tr><tr><td>done <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="nganimate-animate-leave-page"><p>callback function that will be called once the animation is complete</p>
|
|
</div></td></tr></tbody></table></div>
|
|
</li>
|
|
<li><h3 id="move">move(element, parent, after, done)</h3>
|
|
<div class="move"><div class="nganimate-animate-move-page"><p>Fires the move DOM operation. Just before the animation starts, the animate service will either append it into the parent container or
|
|
add the element directly after the after element if present. Then the move animation will be run. Once
|
|
the animation is started, the following CSS classes will be added for the duration of the animation:</p>
|
|
<p>Below is a breakdown of each step that occurs during move animation:</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Animation Step</th>
|
|
<th>What the element class attribute looks like</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1. $animate.move(...) is called</td>
|
|
<td>class="my-animation"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2. element is moved into the parent element or beside the after element</td>
|
|
<td>class="my-animation"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3. $animate runs any JavaScript-defined animations on the element</td>
|
|
<td>class="my-animation"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4. the .ng-move class is added to the element</td>
|
|
<td>class="my-animation ng-move"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5. $animate scans the element styles to get the CSS transition/animation duration and delay</td>
|
|
<td>class="my-animation ng-move"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>6. the .ng-move-active class is added (this triggers the CSS transition/animation)</td>
|
|
<td>class="my-animation ng-move ng-move-active"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>7. $animate waits for X milliseconds for the animation to complete</td>
|
|
<td>class="my-animation ng-move ng-move-active"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>8. The animation ends and both CSS classes are removed from the element</td>
|
|
<td>class="my-animation"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>9. The done() callback is fired (if provided)</td>
|
|
<td>class="my-animation"</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-move-page"><p>the element that will be the focus of the move animation</p>
|
|
</div></td></tr><tr><td>parent</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-move-page"><p>the parent element of the element that will be the focus of the move animation</p>
|
|
</div></td></tr><tr><td>after</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-move-page"><p>the sibling element (which is the previous element) of the element that will be the focus of the move animation</p>
|
|
</div></td></tr><tr><td>done <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="nganimate-animate-move-page"><p>callback function that will be called once the animation is complete</p>
|
|
</div></td></tr></tbody></table></div>
|
|
</li>
|
|
<li><h3 id="removeClass">removeClass(element, className, done)</h3>
|
|
<div class="removeclass"><div class="nganimate-animate-removeclass-page"><p>Triggers a custom animation event based off the className variable and then removes the CSS class provided by the className value
|
|
from the element. Unlike the other animation methods, the animate service will suffix the className value with <a href="#" class="label type-hint type-hint--remove">-remove</a> in
|
|
order to provide the animate service the setup and active CSS classes in order to trigger the animation (this will be skipped if
|
|
no CSS transitions or keyframes are defined on the -remove CSS class).</p>
|
|
<p>Below is a breakdown of each step that occurs during removeClass animation:</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Animation Step</th>
|
|
<th>What the element class attribute looks like</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1. $animate.removeClass(element, 'super') is called</td>
|
|
<td>class="super"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2. $animate runs any JavaScript-defined animations on the element</td>
|
|
<td>class="super"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3. the .super-remove class is added to the element</td>
|
|
<td>class="super super-remove"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4. $animate scans the element styles to get the CSS transition/animation duration and delay</td>
|
|
<td>class="super super-remove"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5. the .super-remove-active class is added (this triggers the CSS transition/animation)</td>
|
|
<td>class="super super-remove super-remove-active"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>6. $animate waits for X milliseconds for the animation to complete</td>
|
|
<td>class="super super-remove super-remove-active"</td>
|
|
</tr>
|
|
<tr>
|
|
<td>7. The animation ends and both CSS all three classes are removed from the element</td>
|
|
<td>class=""</td>
|
|
</tr>
|
|
<tr>
|
|
<td>8. The done() callback is fired (if provided)</td>
|
|
<td>class=""</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-removeclass-page"><p>the element that will be animated</p>
|
|
</div></td></tr><tr><td>className</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="nganimate-animate-removeclass-page"><p>the CSS class that will be animated and then removed from the element</p>
|
|
</div></td></tr><tr><td>done <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="nganimate-animate-removeclass-page"><p>callback function that will be called once the animation is complete</p>
|
|
</div></td></tr></tbody></table></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|