fix(ngAnimate): prohibit usage of the ng-animate class with classNameFilter

Since ngAnimate uses the `ng-animate` CSS class internally to track
state it is better to keep this as a reserved CSS class to avoid
accidentally adding / removing the CSS class when an animation is
started and closed.

BREAKING CHANGE: partially or fully using a regex value containing
`ng-animate` as a token is not allowed anymore. Doing so will trigger a
minErr exception to be thrown.

So don't do this:

```js
// only animate elements that contain the `ng-animate` CSS class
$animateProvider.classNameFilter(/ng-animate/);

// or partially contain it
$animateProvider.classNameFilter(/some-class ng-animate another-class/);
```

but this is OK:

```js
$animateProvider.classNameFilter(/ng-animate-special/);
```

Closes #11431
Closes #11807

Author: matsko

src/ng/animate.js

@@ -2,6 +2,7 @@
 
 var $animateMinErr = minErr('$animate');
 var ELEMENT_NODE = 1;
+var NG_ANIMATE_CLASSNAME = 'ng-animate';
 
 function mergeClasses(a,b) {
   if (!a && !b) return '';
@@ -233,6 +234,13 @@ var $AnimateProvider = ['$provide', function($provide) {
   this.classNameFilter = function(expression) {
     if (arguments.length === 1) {
       this.$$classNameFilter = (expression instanceof RegExp) ? expression : null;
+      if (this.$$classNameFilter) {
+        var reservedRegex = new RegExp("(\\s+|\\/)" + NG_ANIMATE_CLASSNAME + "(\\s+|\\/)");
+        if (reservedRegex.test(this.$$classNameFilter.toString())) {
+          throw $animateMinErr('nongcls','$animateProvider.classNameFilter(regex) prohibits accepting a regex value which matches/contains the "{0}" CSS class.', NG_ANIMATE_CLASSNAME);
+
+        }
+      }
     }
     return this.$$classNameFilter;
   };

src/ngAnimate/.jshintrc

@@ -20,6 +20,7 @@
     "isElement": false,
 
     "ELEMENT_NODE": false,
+    "NG_ANIMATE_CLASSNAME": false,
     "NG_ANIMATE_CHILDREN_DATA": false,
 
     "assertArg": false,

src/ngAnimate/animation.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
-  var NG_ANIMATE_CLASSNAME = 'ng-animate';
   var NG_ANIMATE_REF_ATTR = 'ng-animate-ref';
 
   var drivers = this.drivers = [];

src/ngAnimate/shared.js

@@ -16,6 +16,7 @@ var isElement   = angular.isElement;
 var ELEMENT_NODE = 1;
 var COMMENT_NODE = 8;
 
+var NG_ANIMATE_CLASSNAME = 'ng-animate';
 var NG_ANIMATE_CHILDREN_DATA = '$$ngAnimateChildren';
 
 var isPromiseLike = function(p) {

test/ngAnimate/animateSpec.js

@@ -148,6 +148,27 @@ describe("animations", function() {
       });
     });
 
+    it('should throw a minErr if a regex value is used which partially contains or fully matches the `ng-animate` CSS class', function() {
+      module(function($animateProvider) {
+        assertError(/ng-animate/, true);
+        assertError(/first ng-animate last/, true);
+        assertError(/ng-animate-special/, false);
+        assertError(/first ng-animate-special last/, false);
+        assertError(/first ng-animate ng-animate-special last/, true);
+
+        function assertError(regex, bool) {
+          var expectation = expect(function() {
+            $animateProvider.classNameFilter(regex);
+          });
+
+          var message = '$animateProvider.classNameFilter(regex) prohibits accepting a regex value which matches/contains the "ng-animate" CSS class.';
+
+          bool ? expectation.toThrowMinErr('$animate', 'nongcls', message)
+               : expectation.not.toThrowMinErr('$animate', 'nongcls', message);
+        }
+      });
+    });
+
     it('should complete the leave DOM operation in case the classNameFilter fails', function() {
       module(function($animateProvider) {
         $animateProvider.classNameFilter(/memorable-animation/);