refactor($animateCss): various improvements

- since transition / animation styles are now set on the element even
if the transition property is all, the condition for setting the
transitionDuration can be simplified
- explain why we test for cubic bezier and ease
- rename a parameter

Author: Narretz

src/ngAnimate/animateCss.js

@@ -225,8 +225,8 @@ var CLOSING_TIME_BUFFER = 1.5;
 var DETECT_CSS_PROPERTIES = {
   transitionDuration:       TRANSITION_DURATION_PROP,
   transitionDelay:          TRANSITION_DELAY_PROP,
-  transitionProperty:       TRANSITION_PROP + PROPERTY_KEY,
-  transitionTimingFunction: TRANSITION_PROP + TIMING_KEY,
+  transitionProperty:       TRANSITION_PROPERTY_PROP,
+  transitionTimingFunction: TRANSITION_TIMING_PROP,
   animationDuration:        ANIMATION_DURATION_PROP,
   animationDelay:           ANIMATION_DELAY_PROP,
   animationIterationCount:  ANIMATION_PROP + ANIMATION_ITERATION_COUNT_KEY
@@ -293,13 +293,13 @@ function truthyTimingValue(val) {
   return val === 0 || val != null;
 }
 
-function getCssTransitionStyle(timings, duration) {
+function getCssTransitionStyle(styles, duration) {
   var style = TRANSITION_PROP;
   var value = duration + 's';
 
-  value += ' ' + timings[TRANSITION_TIMING_PROP];
-  value += ' ' + timings[TRANSITION_PROPERTY_PROP];
-  value += timings[TRANSITION_DELAY_PROP] ? ' ' + timings[TRANSITION_DELAY_PROP] + 's' : '';
+  value += ' ' + styles[TRANSITION_TIMING_PROP];
+  value += ' ' + styles[TRANSITION_PROPERTY_PROP];
+  value += styles[TRANSITION_DELAY_PROP] ? ' ' + styles[TRANSITION_DELAY_PROP] + 's' : '';
 
   return [style, value];
 }
@@ -595,8 +595,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
       var flags = {};
       flags.hasTransitions          = timings.transitionDuration > 0;
       flags.hasAnimations           = timings.animationDuration > 0;
-      flags.applyTransitionDuration = options.duration > 0 || hasToStyles && (flags.hasTransitions
-                                         || (flags.hasAnimations && !flags.hasTransitions));
+      flags.applyTransitionDuration = options.duration > 0 || hasToStyles && flags.hasTransitions;
       flags.applyAnimationDuration  = options.duration && flags.hasAnimations;
       flags.applyTransitionDelay    = truthyTimingValue(options.delay) && (flags.applyTransitionDuration || flags.hasTransitions);
       flags.applyAnimationDelay     = truthyTimingValue(options.delay) && flags.hasAnimations;

test/ngAnimate/animateCssSpec.js

@@ -2,6 +2,10 @@
 
 describe("ngAnimate $animateCss", function() {
 
+  // Firefox transforms all transition timing function values to their cubic bezier equivalents
+  var CUBIC_BEZIER_LINEAR_EQUIVALENT = 'cubic-bezier(0, 0, 1, 1)';
+  var CUBIC_BEZIER_EASE_EQUIVALENT = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
+
   beforeEach(module('ngAnimate'));
   beforeEach(module('ngAnimateMock'));
 
@@ -710,7 +714,7 @@ describe("ngAnimate $animateCss", function() {
           triggerAnimationStartFrame();
 
           // IE reports ease in cubic-bezier form
-          expect(element.css('transition-timing-function')).toBeOneOf('ease', 'cubic-bezier(0.25, 0.1, 0.25, 1)');
+          expect(element.css('transition-timing-function')).toBeOneOf('ease', CUBIC_BEZIER_EASE_EQUIVALENT);
         }));
 
 
@@ -2132,7 +2136,7 @@ describe("ngAnimate $animateCss", function() {
 
           var style = element.attr('style');
           expect(style).toContain('3000s');
-          expect(element.css('transition-timing-function')).toBeOneOf('ease', 'cubic-bezier(0.25, 0.1, 0.25, 1)');
+          expect(element.css('transition-timing-function')).toBeOneOf('ease', CUBIC_BEZIER_EASE_EQUIVALENT);
         }));
 
         it("should be applied to a CSS keyframe animation directly if keyframes are detected within the CSS class",
@@ -2238,7 +2242,7 @@ describe("ngAnimate $animateCss", function() {
           expect(style).toMatch(/animation(?:-duration)?:\s*4s/);
           expect(element.css('transition-duration')).toMatch('4s');
           expect(element.css('transition-property')).toMatch('all');
-          expect(element.css('transition-timing-function')).toBeOneOf('linear', 'cubic-bezier(0, 0, 1, 1)');
+          expect(element.css('transition-timing-function')).toBeOneOf('linear', CUBIC_BEZIER_LINEAR_EQUIVALENT);
         }));
       });
 
@@ -2569,7 +2573,7 @@ describe("ngAnimate $animateCss", function() {
           inject(function($animateCss, $rootElement) {
 
           var options = {
-            transitionStyle: '5.5s ease-in color',
+            transitionStyle: '5.5s ease color',
             duration: 4,
             event: 'enter',
             structural: true
@@ -2582,7 +2586,7 @@ describe("ngAnimate $animateCss", function() {
 
           expect(element.css('transition-duration')).toMatch('4s');
           expect(element.css('transition-property')).toMatch('color');
-          expect(element.css('transition-timing-function')).toBeOneOf('ease-in', 'cubic-bezier(0.42, 0, 1, 1)');
+          expect(element.css('transition-timing-function')).toBeOneOf('ease', CUBIC_BEZIER_EASE_EQUIVALENT);
         }));
 
         it("should give priority to the provided delay value, but only update the delay style itself",
@@ -2835,7 +2839,7 @@ describe("ngAnimate $animateCss", function() {
 
           expect(element.css('transition-duration')).toMatch('2.5s');
           expect(element.css('transition-property')).toMatch('all');
-          expect(element.css('transition-timing-function')).toBeOneOf('ease', 'cubic-bezier(0.25, 0.1, 0.25, 1)');
+          expect(element.css('transition-timing-function')).toBeOneOf('ease', CUBIC_BEZIER_EASE_EQUIVALENT);
         }));
 
         it("should remove all inline transition styling when an animation completes",
@@ -2966,7 +2970,7 @@ describe("ngAnimate $animateCss", function() {
         it("should apply a transition duration if the existing transition duration's property value is not 'all'",
           inject(function($animateCss, $rootElement) {
 
-          ss.addRule('.ng-enter', 'transition: 1s cubic-bezier(0.25, 0.1, 0.25, 1) color');
+          ss.addRule('.ng-enter', 'transition: 1s linear color');
 
           var emptyObject = {};
           var options = {
@@ -2982,7 +2986,7 @@ describe("ngAnimate $animateCss", function() {
 
           expect(element.css('transition-duration')).toMatch('1s');
           expect(element.css('transition-property')).toMatch('color');
-          expect(element.css('transition-timing-function')).toBe('cubic-bezier(0.25, 0.1, 0.25, 1)');
+          expect(element.css('transition-timing-function')).toBeOneOf('linear', CUBIC_BEZIER_LINEAR_EQUIVALENT);
         }));
 
         it("should apply a transition duration and an animation duration if duration + styles options are provided for a matching keyframe animation",