From a634907ef810245a6e5bc5e2b79a09e3612d344e Mon Sep 17 00:00:00 2001 From: Guilherme de Souza Date: Fri, 12 Sep 2014 06:59:18 -0300 Subject: [PATCH 1/2] (doc) ng-repeat animation explanation it took a while for me to realize that ng-animate was deprecated and to understand how the animation on this page example works .. so i write a better explanation for this. --- src/ng/directive/ngRepeat.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/ng/directive/ngRepeat.js b/src/ng/directive/ngRepeat.js index db039962653c..8d365fe86847 100644 --- a/src/ng/directive/ngRepeat.js +++ b/src/ng/directive/ngRepeat.js @@ -68,6 +68,42 @@ * as **data-ng-repeat-start**, **x-ng-repeat-start** and **ng:repeat-start**). * * @animations + * + * + * To use animations with ngRepeat you basically just need to write your css transitions appended to + * an class that will be attached to your repeated element. + * ``` + * .my-animation { + * line-height:40px; + * list-style:none; + * } + * + * .my-animation.ng-move, + * .my-animation.ng-enter, + * .my-animation.ng-leave { + * -webkit-transition:all linear 0.5s; + * transition:all linear 0.5s; + * } + * + * .my-animation.ng-leave.ng-leave-active, + * .my-animation.ng-move, + * .my-animation.ng-enter { + * opacity:0; + * max-height:0; + * } + * + * .my-animation.ng-leave, + * .my-animation.ng-move.ng-move-active, + * .my-animation.ng-enter.ng-enter-active { + * opacity:1; + * max-height:40px; + * } + * ``` + * In the above example, your repeated element just need to have + * the my-animation class and angular will take care of the rest. + * + *There are three basic transitions involved in this process : + * * **.enter** - when a new item is added to the list or when an item is revealed after a filter * * **.leave** - when an item is removed from the list or when an item is filtered out From b8713c1ae583d223a323ef6d7e8056ed7d9fa7b1 Mon Sep 17 00:00:00 2001 From: Guilherme de Souza Date: Fri, 12 Sep 2014 08:04:34 -0300 Subject: [PATCH 2/2] Update ngRepeat.js --- src/ng/directive/ngRepeat.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ng/directive/ngRepeat.js b/src/ng/directive/ngRepeat.js index 8d365fe86847..57f5df88fee8 100644 --- a/src/ng/directive/ngRepeat.js +++ b/src/ng/directive/ngRepeat.js @@ -71,7 +71,7 @@ * * * To use animations with ngRepeat you basically just need to write your css transitions appended to - * an class that will be attached to your repeated element. + * a class that will be attached to your repeated element. * ``` * .my-animation { * line-height:40px;