ngAnimate bug fixes

angularFiles.js

@@ -79,7 +79,8 @@ angularFiles = {
     'src/ngTouch/swipe.js',
     'src/ngTouch/directive/ngClick.js',
     'src/ngTouch/directive/ngSwipe.js',
-    'docs/components/angular-bootstrap/bootstrap.js'
+    'docs/components/angular-bootstrap/bootstrap.js',
+    'src/privateMocks.js'
   ],
 
   'angularScenario': [

docs/component-spec/annotationsSpec.js

@@ -111,14 +111,12 @@ describe('Docs Annotations', function() {
       expect(foldout.html()).toContain('loading');
     }));
 
-    it('should download a foldout HTML page and animate the contents', inject(function($httpBackend, $timeout) {
+    it('should download a foldout HTML page and animate the contents', inject(function($httpBackend, $timeout, $sniffer) {
       $httpBackend.expect('GET', url).respond('hello');
 
       element.triggerHandler('click');
       $httpBackend.flush();
 
-      $timeout.flushNext(0);
-      $timeout.flushNext(1);
       $timeout.flushNext(0);
       $timeout.flushNext(1000);
 
@@ -127,27 +125,22 @@ describe('Docs Annotations', function() {
       expect(foldout.text()).toContain('hello');
     }));
 
-    it('should hide then show when clicked again', inject(function($httpBackend, $timeout) {
+    it('should hide then show when clicked again', inject(function($httpBackend, $timeout, $sniffer) {
       $httpBackend.expect('GET', url).respond('hello');
 
       //enter
       element.triggerHandler('click');
       $httpBackend.flush();
       $timeout.flushNext(0);
-      $timeout.flushNext(1);
-      $timeout.flushNext(0);
       $timeout.flushNext(1000);
 
       //hide
       element.triggerHandler('click');
-      $timeout.flushNext(1);
       $timeout.flushNext(0);
       $timeout.flushNext(200);
-      $timeout.flushNext(0);
 
       //show
       element.triggerHandler('click');
-      $timeout.flushNext(1);
       $timeout.flushNext(0);
       $timeout.flushNext(500);
       $timeout.flushNext(0);

docs/src/templates/css/animations.css

@@ -64,13 +64,6 @@
   height:0;
 }
 
-.animate-container.animations-off * {
-  -webkit-transition: none;
-  -moz-transition: none;
-  -o-transition: color 0 ease-in; /* opera is special :) */
-  transition: none;
-}
-
 .foldout.ng-enter,
 .foldout.ng-hide-add,
 .foldout.ng-hide-remove {

src/ng/directive/ngClass.js

@@ -151,7 +151,7 @@ function classDirective(name, selector) {
 
    ## Animations
 
-   Example that demostrates how addition and removal of classes can be animated.
+   The example below demonstrates how to perform animations using ngClass.
 
    <example animations="true">
      <file name="index.html">
@@ -196,6 +196,14 @@ function classDirective(name, selector) {
        });
      </file>
    </example>
+
+
+   ## ngClass and pre-existing CSS3 Transitions/Animations
+   The ngClass directive still supports CSS3 Transitions/Animations even if they do not follow the ngAnimate CSS naming structure.
+   Therefore, if any CSS3 Transition/Animation styles (outside of ngAnimate) are set on the element, then, if a ngClass animation
+   is triggered, the ngClass animation will be skipped so that ngAnimate can allow for the pre-existing transition or animation to
+   take over. This restriction allows for ngClass to still work with standard CSS3 Transitions/Animations that are defined
+   outside of ngAnimate.
  */
 var ngClassDirective = classDirective('', true);
 

src/privateMocks.js

@@ -0,0 +1,28 @@
+function createMockStyleSheet(doc, wind) {
+  doc = doc ? doc[0] : document;
+  wind = wind || window;
+
+  var node = doc.createElement('style');
+  var head = doc.getElementsByTagName('head')[0];
+  head.appendChild(node);
+
+  var ss = doc.styleSheets[doc.styleSheets.length - 1];
+
+  return {
+    addRule : function(selector, styles) {
+      try {
+        ss.insertRule(selector + '{ ' + styles + '}', 0);
+      }
+      catch(e) {
+        try {
+          ss.addRule(selector, styles);
+        }
+        catch(e) {}
+      }
+    },
+
+    destroy : function() {
+      head.removeChild(node);
+    }
+  };
+};