|
1 | 1 | /** |
2 | | - * Css animation and dom lifecycle management for Angular. |
| 2 | + * CSS animation and DOM lifecycle management for AngularDart apps. |
3 | 3 | * |
4 | | - * The [animate] library makes it easier to build animations that affect the |
5 | | - * lifecycle of dom elements. A useful example of this is animating the |
6 | | - * removal of an element from the dom. In order to do this ideally the |
| 4 | + * The [angular.animate](#angular/angular-animate) library makes it easier to build animations |
| 5 | + * that affect the lifecycle of DOM elements. A useful example of this is animating the |
| 6 | + * removal of an element from the DOM. In order to do this ideally the |
7 | 7 | * operation should immediatly execute and manipulate the data model, |
8 | | - * and the framework should handle the actual remove of the dom element once |
| 8 | + * and the framework should handle the actual remove of the DOM element once |
9 | 9 | * the animation complets. This ensures that the logic and model of the |
10 | 10 | * application is seperated so that the state of the model can be reasoned |
11 | 11 | * about without having to wory about future modifications of the model. |
12 | 12 | * This library uses computed css styles to calculate the total duration |
13 | | - * of an animation and handles the addition, removal, and modification of dom |
| 13 | + * of an animation and handles the addition, removal, and modification of DOM |
14 | 14 | * elements for block level directives such as `ng-if`, `ng-repeat`, |
15 | 15 | * `ng-hide`, and more. |
16 | 16 | * |
|
19 | 19 | * var module = new Module() |
20 | 20 | * ..install(new NgAnimateModule()); |
21 | 21 | * |
22 | | - * Once the module has been installed, all block level dom manipulations will |
| 22 | + * Once the module has been installed, all block level DOM manipulations will |
23 | 23 | * be routed through the [CssAnimate] class instead of the |
24 | 24 | * default [NgAnimate] implementation. This will, in turn, |
25 | 25 | * perform the tracking, manipulation, and computation for animations. |
26 | 26 | * |
27 | 27 | * As an example of how this works, lets walk through what happens whan an |
28 | | - * element is added to the dom. The [CssAnimate] implementation will add the |
29 | | - * `.ng-enter` class to new dom elements when they are inserted into the dom |
| 28 | + * element is added to the DOM. The [CssAnimate] implementation will add the |
| 29 | + * `.ng-enter` class to new DOM elements when they are inserted into the DOM |
30 | 30 | * by a directive and will read the computed style. If there is a |
31 | 31 | * transition or keyframe animation, that animation duration will be read, |
32 | 32 | * and the animation will be performed. The `.ng-enter-active` class will be |
33 | | - * added to the dom element to set the target state for transition based |
| 33 | + * added to the DOM element to set the target state for transition based |
34 | 34 | * animations. When the animation is complete (determined by the |
35 | 35 | * precomputed duration) the `.ng-enter` and `.ng-enter-active` classes |
36 | | - * will be removed from the dom element. |
| 36 | + * will be removed from the DOM element. |
37 | 37 | * |
38 | | - * When removing elements from the dom, a simliar pattern is followed. The |
| 38 | + * When removing elements from the DOM, a simliar pattern is followed. The |
39 | 39 | * `.ng-leave` class will be added to an element, the transition and / or |
40 | 40 | * keyframe animation duration will be computed, and if it is non-zero the |
41 | 41 | * animation will be run by adding the `.ng-leave-active` class. When |
42 | 42 | * the animation completes, the element will be physically removed from the |
43 | | - * dom. |
| 43 | + * DOM. |
44 | 44 | * |
45 | | - * The same set of steps is run for each of the following types of dom |
| 45 | + * The same set of steps is run for each of the following types of DOM |
46 | 46 | * manipulation: |
47 | 47 | * |
48 | 48 | * * `.ng-enter` |
|
75 | 75 | * `ctrl.visible` property goes from `true` to `false`. |
76 | 76 | * |
77 | 77 | * The [CssAnimate] will also do optimizations on running animations by |
78 | | - * preventing child dom animations with the [AnimationOptimizer]. This |
| 78 | + * preventing child DOM animations with the [AnimationOptimizer]. This |
79 | 79 | * prevents transitions on child elements while the parent is animating, |
80 | 80 | * but will not stop running transitions once they have started. |
81 | 81 | * |
|
88 | 88 | * running animation check. |
89 | 89 | * |
90 | 90 | * `ng-animate-children` allows animation to be controlled on large chunks of |
91 | | - * dom. It only affects child elements, and allows the `always`, `never`, |
| 91 | + * DOM. It only affects child elements, and allows the `always`, `never`, |
92 | 92 | * and `auto` values to be specified. Always will always attempt animations |
93 | | - * on child dom directives, never will always prevent them (except in the |
| 93 | + * on child DOM directives, never will always prevent them (except in the |
94 | 94 | * case where a given element has `ng-animate="always"` specified), |
95 | 95 | * and `auto` will defer the decision to the currently running animation |
96 | 96 | * check. |
|
0 commit comments