diff options
Diffstat (limited to 'src/ng')
| -rw-r--r-- | src/ng/animator.js | 21 | ||||
| -rw-r--r-- | src/ng/directive/ngInclude.js | 12 | ||||
| -rw-r--r-- | src/ng/directive/ngRepeat.js | 18 | ||||
| -rw-r--r-- | src/ng/directive/ngShowHide.js | 20 | ||||
| -rw-r--r-- | src/ng/directive/ngSwitch.js | 10 | ||||
| -rw-r--r-- | src/ng/directive/ngView.js | 10 |
6 files changed, 45 insertions, 46 deletions
diff --git a/src/ng/animator.js b/src/ng/animator.js index 97c9e0ed..04ef4a6e 100644 --- a/src/ng/animator.js +++ b/src/ng/animator.js @@ -58,7 +58,7 @@ * The animate-enter CSS class is the event name that you * have provided within the ngAnimate attribute. * */ - * .animate-enter-setup { + * .animate-enter { * -webkit-transition: 1s linear all; /* Safari/Chrome */ * -moz-transition: 1s linear all; /* Firefox */ * -ms-transition: 1s linear all; /* IE10 */ @@ -74,7 +74,7 @@ * classes together to avoid any CSS-specificity * conflicts * */ - * .animate-enter-setup.animate-enter-start { + * .animate-enter.animate-enter-active { * /* The animation code itself */ * opacity: 1; * } @@ -87,7 +87,7 @@ * * <pre> * <style type="text/css"> - * .animate-enter-setup { + * .animate-enter { * -webkit-animation: enter_sequence 1s linear; * -moz-animation: enter_sequence 1s linear; * -o-animation: enter_sequence 1s linear; @@ -116,8 +116,8 @@ * * ngAnimate will first examine any CSS animation code and then fallback to using CSS transitions. * - * Upon DOM mutation, the setup class is added first, then the browser is allowed to reflow the content and then, - * the start class is added to trigger the animation. The ngAnimate directive will automatically extract the duration + * Upon DOM mutation, the event class is added first, then the browser is allowed to reflow the content and then, + * the active class is added to trigger the animation. The ngAnimate directive will automatically extract the duration * of the animation to determine when the animation ends. Once the animation is over then both CSS classes will be * removed from the DOM. If a browser does not support CSS transitions or CSS animations then the animation will start and end * immediately resulting in a DOM element that is at it's final state. This final state is when the DOM element @@ -270,8 +270,7 @@ var $AnimatorProvider = function() { beforeFn(element, parent, after); afterFn(element, parent, after); } else { - var setupClass = className + '-setup'; - var startClass = className + '-start'; + var activeClassName = className + '-active'; if (!parent) { parent = after ? after.parent() : element.parent(); @@ -284,7 +283,7 @@ var $AnimatorProvider = function() { } element.data(NG_ANIMATE_CONTROLLER, {running:true}); - element.addClass(setupClass); + element.addClass(className); beforeFn(element, parent, after); if (element.length == 0) return done(); @@ -304,7 +303,7 @@ var $AnimatorProvider = function() { }; function beginAnimation() { - element.addClass(startClass); + element.addClass(activeClassName); if (polyfillStart) { polyfillStart(element, done, memento); } else if (isFunction($window.getComputedStyle)) { @@ -357,8 +356,8 @@ var $AnimatorProvider = function() { function done() { afterFn(element, parent, after); - element.removeClass(setupClass); - element.removeClass(startClass); + element.removeClass(className); + element.removeClass(activeClassName); element.removeData(NG_ANIMATE_CONTROLLER); } } diff --git a/src/ng/directive/ngInclude.js b/src/ng/directive/ngInclude.js index 730c7bdf..1187c733 100644 --- a/src/ng/directive/ngInclude.js +++ b/src/ng/directive/ngInclude.js @@ -61,8 +61,8 @@ <div>Content of template2.html</div> </file> <file name="animations.css"> - .example-leave-setup, - .example-enter-setup { + .example-leave, + .example-enter { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; @@ -81,17 +81,17 @@ padding:10px; } - .example-enter-setup { + .example-enter { top:-50px; } - .example-enter-setup.example-enter-start { + .example-enter.example-enter-active { top:0; } - .example-leave-setup { + .example-leave { top:0; } - .example-leave-setup.example-leave-start { + .example-leave.example-leave-active { top:50px; } </file> diff --git a/src/ng/directive/ngRepeat.js b/src/ng/directive/ngRepeat.js index 0fd53c2f..330f6abb 100644 --- a/src/ng/directive/ngRepeat.js +++ b/src/ng/directive/ngRepeat.js @@ -88,9 +88,9 @@ </div> </file> <file name="animations.css"> - .example-repeat-enter-setup, - .example-repeat-leave-setup, - .example-repeat-move-setup { + .example-repeat-enter, + .example-repeat-leave, + .example-repeat-move { -webkit-transition:all linear 0.5s; -moz-transition:all linear 0.5s; -ms-transition:all linear 0.5s; @@ -98,26 +98,26 @@ transition:all linear 0.5s; } - .example-repeat-enter-setup { + .example-repeat-enter { line-height:0; opacity:0; } - .example-repeat-enter-setup.example-repeat-enter-start { + .example-repeat-enter.example-repeat-enter-active { line-height:20px; opacity:1; } - .example-repeat-leave-setup { + .example-repeat-leave { opacity:1; line-height:20px; } - .example-repeat-leave-setup.example-repeat-leave-start { + .example-repeat-leave.example-repeat-leave-active { opacity:0; line-height:0; } - .example-repeat-move-setup { } - .example-repeat-move-setup.example-repeat-move-start { } + .example-repeat-move { } + .example-repeat-move.example-repeat-move-active { } </file> <file name="scenario.js"> it('should render initial data set', function() { diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js index 7ccc0aa0..7ef7008c 100644 --- a/src/ng/directive/ngShowHide.js +++ b/src/ng/directive/ngShowHide.js @@ -45,7 +45,7 @@ </div> </file> <file name="animations.css"> - .example-show-setup, .example-hide-setup { + .example-show, .example-hide { -webkit-transition:all linear 0.5s; -moz-transition:all linear 0.5s; -ms-transition:all linear 0.5s; @@ -53,12 +53,12 @@ transition:all linear 0.5s; } - .example-show-setup { + .example-show { line-height:0; opacity:0; padding:0 10px; } - .example-show-start.example-show-start { + .example-show-active.example-show-active { line-height:20px; opacity:1; padding:10px; @@ -66,14 +66,14 @@ background:white; } - .example-hide-setup { + .example-hide { line-height:20px; opacity:1; padding:10px; border:1px solid black; background:white; } - .example-hide-start.example-hide-start { + .example-hide-active.example-hide-active { line-height:0; opacity:0; padding:0 10px; @@ -154,7 +154,7 @@ var ngShowDirective = ['$animator', function($animator) { </div> </file> <file name="animations.css"> - .example-show-setup, .example-hide-setup { + .example-show, .example-hide { -webkit-transition:all linear 0.5s; -moz-transition:all linear 0.5s; -ms-transition:all linear 0.5s; @@ -162,12 +162,12 @@ var ngShowDirective = ['$animator', function($animator) { transition:all linear 0.5s; } - .example-show-setup { + .example-show { line-height:0; opacity:0; padding:0 10px; } - .example-show-start.example-show-start { + .example-show.example-show-active { line-height:20px; opacity:1; padding:10px; @@ -175,14 +175,14 @@ var ngShowDirective = ['$animator', function($animator) { background:white; } - .example-hide-setup { + .example-hide { line-height:20px; opacity:1; padding:10px; border:1px solid black; background:white; } - .example-hide-start.example-hide-start { + .example-hide.example-hide-active { line-height:0; opacity:0; padding:0 10px; diff --git a/src/ng/directive/ngSwitch.js b/src/ng/directive/ngSwitch.js index 8cf8945d..f36e651c 100644 --- a/src/ng/directive/ngSwitch.js +++ b/src/ng/directive/ngSwitch.js @@ -71,7 +71,7 @@ } </file> <file name="animations.css"> - .example-leave-setup, .example-enter-setup { + .example-leave, .example-enter { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; @@ -90,17 +90,17 @@ padding:10px; } - .example-enter-setup { + .example-enter { top:-50px; } - .example-enter-start.example-enter-start { + .example-enter.example-enter-active { top:0; } - .example-leave-setup { + .example-leave { top:0; } - .example-leave-start.example-leave-start { + .example-leave.example-leave-active { top:50px; } </file> diff --git a/src/ng/directive/ngView.js b/src/ng/directive/ngView.js index b553544c..9b5694dd 100644 --- a/src/ng/directive/ngView.js +++ b/src/ng/directive/ngView.js @@ -61,7 +61,7 @@ </file> <file name="animations.css"> - .example-leave-setup, .example-enter-setup { + .example-leave, .example-enter { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; @@ -87,15 +87,15 @@ padding:10px; } - .example-enter-setup { + .example-enter { left:100%; } - .example-enter-setup.example-enter-start { + .example-enter.example-enter-active { left:0; } - .example-leave-setup { } - .example-leave-setup.example-leave-start { + .example-leave { } + .example-leave.example-leave-active { left:-100%; } </file> |
