fix(ngAnimate): ensure that shared CSS classes between anchor nodes are retained

This patch ensures that all of the CSS classes that exist on both
anchor nodes (the nodes that contain a `ng-animate-ref` attribute)
are not removed from the cloned element during the anchor animation.
(Previously the `in` animation would accidentally remove the CSS
classes of the first element.)

Closes #11681

Author: matsko

src/ngAnimate/animateCssDriver.js

@@ -45,7 +45,7 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
 
     function prepareAnchoredAnimation(classes, outAnchor, inAnchor) {
       var clone = jqLite(getDomNode(outAnchor).cloneNode(true));
-      var startingClasses = filterCssClasses(clone.attr('class') || '');
+      var startingClasses = filterCssClasses(getClassVal(clone));
       var anchorClasses = pendClasses(classes, NG_ANIMATE_ANCHOR_SUFFIX);
 
       outAnchor.addClass(NG_ANIMATE_SHIM_CLASS_NAME);
@@ -140,13 +140,19 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
         });
       }
 
+      function getClassVal(element) {
+        return element.attr('class') || '';
+      }
+
       function prepareInAnimation() {
-        var endingClasses = filterCssClasses(inAnchor.attr('class'));
-        var classes = getUniqueValues(endingClasses, startingClasses);
+        var endingClasses = filterCssClasses(getClassVal(inAnchor));
+        var toAdd = getUniqueValues(endingClasses, startingClasses);
+        var toRemove = getUniqueValues(startingClasses, endingClasses);
+
         return $animateCss(clone, {
           to: calculateAnchorStyles(inAnchor),
-          addClass: NG_IN_ANCHOR_CLASS_NAME + ' ' + classes,
-          removeClass: NG_OUT_ANCHOR_CLASS_NAME + ' ' + startingClasses,
+          addClass: NG_IN_ANCHOR_CLASS_NAME + ' ' + toAdd,
+          removeClass: NG_OUT_ANCHOR_CLASS_NAME + ' ' + toRemove,
           delay: true
         });
       }

test/ngAnimate/animateCssDriverSpec.js

@@ -802,9 +802,9 @@ describe("ngAnimate $$animateCssDriver", function() {
         captureLog.pop().runner.end();
         $$rAF.flush();
 
-        var outAnimation = captureLog.pop();
-        var clonedAnchor = outAnimation.element;
-        var details = outAnimation.args[1];
+        var inAnimation = captureLog.pop();
+        var clonedAnchor = inAnimation.element;
+        var details = inAnimation.args[1];
 
         var addedClasses = details.addClass.split(' ');
         var removedClasses = details.removeClass.split(' ');
@@ -818,6 +818,11 @@ describe("ngAnimate $$animateCssDriver", function() {
         expect(removedClasses).not.toContain('brown');
         expect(removedClasses).not.toContain('black');
 
+        expect(removedClasses).not.toContain('red');
+        expect(removedClasses).not.toContain('blue');
+
+        inAnimation.runner.end();
+
         expect(clonedAnchor).toHaveClass('red');
         expect(clonedAnchor).toHaveClass('blue');
       }));