4
4
* The [angular.animate] (#angular/angular-animate) library makes it easier to build animations
5
5
* that affect the lifecycle of DOM elements. A useful example of this is animating the
6
6
* removal of an element from the DOM. In order to do this ideally the
7
- * operation should immediatly execute and manipulate the data model,
7
+ * operation should immediately execute and manipulate the data model,
8
8
* and the framework should handle the actual remove of the DOM element once
9
- * the animation complets . This ensures that the logic and model of the
10
- * application is seperated so that the state of the model can be reasoned
11
- * about without having to wory about future modifications of the model.
9
+ * the animation completes . This ensures that the logic and model of the
10
+ * application is separated so that the state of the model can be reasoned
11
+ * about without having to worry about future modifications of the model.
12
12
* This library uses computed css styles to calculate the total duration
13
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
*
17
17
* To use, install the AnimationModule into your main module:
18
18
*
19
- * var module = new Module()
20
- * ..install(new AnimationModule());
19
+ * var module = new Module()..install(new AnimationModule());
21
20
*
22
21
* Once the module has been installed, all block level DOM manipulations will
23
22
* be routed through the [CssAnimate] class instead of the
24
23
* default [NgAnimate] implementation. This will, in turn,
25
24
* perform the tracking, manipulation, and computation for animations.
26
25
*
27
- * As an example of how this works, let's walk through what happens whan an
26
+ * As an example of how this works, let's walk through what happens when an
28
27
* element is added to the DOM. The [CssAnimate] implementation will add the
29
28
* `.ng-enter` class to new DOM elements when they are inserted into the DOM
30
29
* by a directive and will read the computed style. If there is a
35
34
* precomputed duration) the `.ng-enter` and `.ng-enter-active` classes
36
35
* will be removed from the DOM element.
37
36
*
38
- * When removing elements from the DOM, a simliar pattern is followed. The
37
+ * When removing elements from the DOM, a similar pattern is followed. The
39
38
* `.ng-leave` class will be added to an element, the transition and / or
40
39
* keyframe animation duration will be computed, and if it is non-zero the
41
40
* animation will be run by adding the `.ng-leave-active` class. When
58
57
* Fade out example:
59
58
*
60
59
* HTML:
61
- * <div class="goodbye" ng-if="ctrl. visible">
60
+ * <div class="goodbye" ng-if="visible">
62
61
* Goodbye world!
63
62
* </div>
64
63
*
71
70
* opacity: 0;
72
71
* }
73
72
*
74
- * This will perform a fade out animation on the 'goodby ' div when the
75
- * `ctrl. visible` property goes from `true` to `false` .
73
+ * This will perform a fade out animation on the 'goodbye ' div when the
74
+ * `visible` property goes from `true` to `false` .
76
75
*
77
76
* The [CssAnimate] will also do optimizations on running animations by
78
77
* preventing child DOM animations with the [AnimationOptimizer] . This
@@ -129,11 +128,11 @@ final Logger _logger = new Logger('ng.animate');
129
128
* of view construction, and some of the native directives to allow you to add
130
129
* and define css transition and keyframe animations for the styles of your
131
130
* elements.
132
- *
131
+ *
133
132
* Example html:
134
133
*
135
134
* <div ng-if="ctrl.myBoolean" class="my-div">...</div>
136
- *
135
+ *
137
136
* Example css defining an opacity transition over .5 seconds using the
138
137
* `.ng-enter` and `.ng-leave` css classes:
139
138
*
@@ -144,7 +143,7 @@ final Logger _logger = new Logger('ng.animate');
144
143
* .my-div.ng-enter-active {
145
144
* opacity: 1;
146
145
* }
147
- *
146
+ *
148
147
* .my-div.ng-leave {
149
148
* transition: all 500ms;
150
149
* opacity: 1;
0 commit comments