chore(ngAnimate): CSS classes X-setup/X-start -> X/X-active

BREAKING CHANGE: css classes foo-setup/foo-start become foo/foo-active

The CSS transition classes have changed suffixes. To migrate rename
.foo-setup {...} to .foo {...}
.foo-start {...} to .foo-active {...}

or for type: enter, leave, move, show, hide

.foo-type-setup {...} to .foo-type {...}
.foo-type-start {...} to .foo-type-active {...}

Author: matsko

docs/src/templates/css/animations.css

@@ -1,12 +1,12 @@
-.reveal-setup {
+.reveal {
   -webkit-transition:1s linear all;
   -moz-transition:1s linear all;
   -o-transition:1s linear all;
   transition:1s linear all;
 
   opacity:0;
 }
-.reveal-setup.reveal-start {
+.reveal.reveal-active {
   opacity:1;
 }
 
@@ -15,7 +15,7 @@
   overflow:hidden;
 }
 
-.slide-reveal-setup {
+.slide-reveal {
   -webkit-transition:0.5s linear all;
   -moz-transition:0.5s linear all;
   -o-transition:0.5s linear all;
@@ -26,12 +26,12 @@
   opacity:0;
   top:10px;
 }
-.slide-reveal-setup.slide-reveal-start {
+.slide-reveal.slide-reveal-active {
   top:0;
   opacity:1;
 }
 
-.expand-enter-setup {
+.expand-enter {
   -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
   -moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
   -o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
@@ -41,13 +41,13 @@
   line-height:0;
   height:0!important;
 }
-.expand-enter-setup.expand-enter-start {
+.expand-enter.expand-enter-active {
   opacity:1;
   line-height:20px;
   height:20px!important;
 }
 
-.expand-leave-setup {
+.expand-leave {
   -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
   -moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
   -o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
@@ -56,7 +56,7 @@
   opacity:1;
   height:20px;
 }
-.expand-leave-setup.expand-leave-start {
+.expand-leave.expand-leave-active {
   opacity:0;
   height:0;
 }

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);
             }
           }

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>

src/ng/directive/ngRepeat.js

@@ -88,36 +88,36 @@
       </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;
         -o-transition:all linear 0.5s;
         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() {

src/ng/directive/ngShowHide.js

@@ -45,35 +45,35 @@
       </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;
         -o-transition:all linear 0.5s;
         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;
         border:1px solid black;
         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,35 +154,35 @@ 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;
         -o-transition:all linear 0.5s;
         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;
         border:1px solid black;
         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;

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>

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>