Skip to content
This repository was archived by the owner on Feb 22, 2018. It is now read-only.

Commit 613030a

Browse files
codelogicmhevery
authored andcommitted
feat(doc): Animation library documentation updates and fixes.
Closes #760
1 parent 0576f27 commit 613030a

File tree

1 file changed

+38
-24
lines changed

1 file changed

+38
-24
lines changed

lib/animate/module.dart

+38-24
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,46 @@
11
/**
2+
* Css animation and dom lifecycle management for Angular.
3+
*
24
* The [animate] library makes it easier to build animations that affect the
3-
* lifecycle of dom elements. The cononical example of this is animating the
4-
* removal of an element from the dom. In order to do this,
5-
* one must know about the duration of the animation, and immediatly perform
6-
* changes in the backing data model. The animation library uses computed css
7-
* styles to calculate the total duration of animation and handles the addition
8-
* and removal of elements for the dom for elements that are manipulated by
9-
* block level directives such as `ng-if`, `ng-repeat`, `ng-hide`, and more.
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
7+
* operation should immediatly execute and manipulate the data model,
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.
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
14+
* elements for block level directives such as `ng-if`, `ng-repeat`,
15+
* `ng-hide`, and more.
1016
*
1117
* To use, install the NgAnimateModule into your main module:
1218
*
13-
* var module = new Module()
19+
* var module = new Module()
1420
* ..install(new NgAnimateModule());
1521
*
16-
* Once this is installed, all block level dom manipulations will be routed
17-
* through the [CssAnimate] implementation instead of the default [NgAnimate]
18-
* class.
22+
* Once the module has been installed, all block level dom manipulations will
23+
* be routed through the [CssAnimate] class instead of the
24+
* default [NgAnimate] implementation. This will, in turn,
25+
* perform the tracking, manipulation, and computation for animations.
1926
*
20-
* For dom manipulations, this will add the `.ng-enter` class to a new dom
21-
* element, and then read the computed style. If there is a transition or
22-
* keyframe animation, the animation duration will be read,
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
30+
* by a directive and will read the computed style. If there is a
31+
* transition or keyframe animation, that animation duration will be read,
2332
* and the animation will be performed. The `.ng-enter-active` class will be
24-
* added to set the target state for transition based animations. For
25-
* removing elements from the dom, a simliar pattern is followed. The
33+
* added to the dom element to set the target state for transition based
34+
* animations. When the animation is complete (determined by the
35+
* precomputed duration) the `.ng-enter` and `.ng-enter-active` classes
36+
* will be removed from the dom element.
37+
*
38+
* When removing elements from the dom, a simliar pattern is followed. The
2639
* `.ng-leave` class will be added to an element, the transition and / or
2740
* keyframe animation duration will be computed, and if it is non-zero the
28-
* animation will be run by adding the `.ng-leave-active` class,
29-
* and the element will be physically removed after the animation completes.
41+
* animation will be run by adding the `.ng-leave-active` class. When
42+
* the animation completes, the element will be physically removed from the
43+
* dom.
3044
*
3145
* The same set of steps is run for each of the following types of dom
3246
* manipulation:
@@ -35,25 +49,25 @@
3549
* * `.ng-leave`
3650
* * `.ng-move`
3751
* * `.{cssclass}-add`
38-
* * `.{cssclasss}-remove`
52+
* * `.{cssclass}-remove`
3953
*
4054
* When writing the css for animating a component you should avoid putting
41-
* css transitions on elements that might be animated, otherwise there may be
55+
* css transitions on elements that might be animated or there may be
4256
* unintended pauses or side effects when an element is removed.
4357
*
4458
* Fade out example:
4559
*
4660
* HTML:
47-
* <div class="goodby" ng-if="ctrl.visible">
48-
* Goodby world!
61+
* <div class="goodbye" ng-if="ctrl.visible">
62+
* Goodbye world!
4963
* </div>
5064
*
5165
* CSS:
52-
* .goodby.ng-leave {
66+
* .goodbye.ng-leave {
5367
* opacity: 1;
5468
* transition: opacity 1s;
5569
* }
56-
* .goodby.ng-leave.ng-leave-active {
70+
* .goodbye.ng-leave.ng-leave-active {
5771
* opacity: 0;
5872
* }
5973
*

0 commit comments

Comments
 (0)