|
6 | 6 |
|
7 | 7 | # Animations
|
8 | 8 |
|
9 |
| -AngularJS provides animation hooks for common directives such as `ngRepeat`, `ngSwitch`, and |
10 |
| -`ngView`, as well as custom directives via the `$animate` service. These animation hooks are set in |
11 |
| -place to trigger animations during the life cycle of various directives and when triggered, will |
12 |
| -attempt to perform a CSS Transition, CSS Keyframe Animation or a JavaScript callback Animation |
13 |
| -(depending on whether an animation is placed on the given directive). Animations can be placed using |
14 |
| -vanilla CSS by following the naming conventions set in place by AngularJS or with JavaScript code, |
15 |
| -defined as a factory. |
| 9 | +AngularJS provides animation hooks for common directives such as |
| 10 | +{@link ng.directive:ngRepeat ngRepeat}, {@link ng.directive:ngSwitch ngSwitch}`, and |
| 11 | +{@link ngRoute.directive:ngView ngView}`, as well as custom directives via the `$animate` service. |
| 12 | +These animation hooks are set in place to trigger animations during the life cycle of various |
| 13 | +directives and when triggered, will attempt to perform a CSS Transition, CSS Keyframe Animation or a |
| 14 | +JavaScript callback Animation (depending on whether an animation is placed on the given directive). |
| 15 | +Animations can be placed using vanilla CSS by following the naming conventions set in place by |
| 16 | +AngularJS or with JavaScript code, defined as a factory. |
16 | 17 |
|
17 | 18 | <div class="alert alert-info">
|
18 | 19 | Note that we have used non-prefixed CSS transition properties in our examples as the major
|
@@ -267,8 +268,8 @@ overwhelming, and the performance may suffer.
|
267 | 268 |
|
268 | 269 | Internally, `ngAnimate` waits until all template downloads that are started right after bootstrap
|
269 | 270 | have finished. Then, it waits for the currently running {@link ng.$rootScope.Scope#$digest $digest}
|
270 |
| -and the one more after that to finish. This ensures that the whole app has been compiled fully |
271 |
| -before animations are attempted. |
| 271 | +and one more after that, to finish. This ensures that the whole app has been compiled fully before |
| 272 | +animations are attempted. |
272 | 273 |
|
273 | 274 | If you do want your animations to play when the app bootstraps, you can enable animations globally
|
274 | 275 | in your main module's {@link angular.Module#run run} function:
|
@@ -345,11 +346,10 @@ With a single `boolean` argument, it enables / disables animations globally:
|
345 | 346 | `$animate.enabled(false)` disables all animations in your app.
|
346 | 347 |
|
347 | 348 | When the first argument is a native DOM or jqLite/jQuery element, the function enables / disables
|
348 |
| -animations on this element *and all its children*: `$animate.enabled(myElement, false)`. This is the |
349 |
| -most flexible way to change the animation state. For example, even if you have used it to disable |
350 |
| -animations on a parent element, you can still re-enable it for a child element. And compared to the |
351 |
| -`classNameFilter`, you can change the animation status at runtime instead of during the config |
352 |
| -phase. |
| 349 | +animations on this element *and all its children*: `$animate.enabled(myElement, false)`. You can |
| 350 | +still use it to re-enable animations for a child element, even if you have disabled them on a parent |
| 351 | +element. And compared to the `classNameFilter`, you can change the animation status at runtime |
| 352 | +instead of during the config phase. |
353 | 353 |
|
354 | 354 | Note however that the `$animate.enabled()` state for individual elements does not overwrite
|
355 | 355 | disabling rules that have been set in the {@link $animateProvider#classNameFilter classNameFilter}.
|
@@ -458,7 +458,7 @@ You can also use one of the other
|
458 | 458 | strategies to disable animations}.
|
459 | 459 |
|
460 | 460 |
|
461 |
| -### Enable animations outside of the application DOM tree: {@link ng.$animate#pin $animate.pin()} |
| 461 | +## Enable animations outside of the application DOM tree: {@link ng.$animate#pin $animate.pin()} |
462 | 462 |
|
463 | 463 | Before animating, `ngAnimate` checks if the animated element is inside the application DOM tree. If
|
464 | 464 | not, no animation is run. Usually, this is not a problem since most apps use the `html` or `body`
|
|
0 commit comments