fix($animate): ensure that class-based animations are properly applied when cancelled

Instead of merging existing animation option to new animation options we can
merge in reverse and utilize old animation runner.

Closes #12266
Closes #12007

Author: sreeramu

src/ngAnimate/animateQueue.js

@@ -330,8 +330,9 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
             // method which will call the runner methods in async.
             existingAnimation.close();
           } else {
-            // this will merge the existing animation options into this new follow-up animation
-            mergeAnimationOptions(element, newAnimation.options, existingAnimation.options);
+            // this will merge the new animation options into existing animation options
+            mergeAnimationOptions(element, existingAnimation.options, newAnimation.options);
+            return existingAnimation.runner;
           }
         } else {
           // a joined animation means that this animation will take over the existing one

test/ngAnimate/animateSpec.js

@@ -1206,6 +1206,24 @@ describe("animations", function() {
         expect(r1).toBe(r2);
         expect(r2).toBe(r3);
       }));
+
+      it('should not skip or miss the animations when animations are executed sequential',
+        inject(function($animate, $rootScope, $$rAF, $rootElement) {
+
+        element = jqLite('<div></div>');
+
+        $rootElement.append(element);
+
+        $animate.addClass(element, 'rclass');
+        $animate.removeClass(element, 'rclass');
+        $animate.addClass(element, 'rclass');
+        $animate.removeClass(element, 'rclass');
+
+        $rootScope.$digest();
+        $$rAF.flush();
+
+        expect(element).not.toHaveClass('rclass');
+      }));
     });
   });