fix(animations): ensure a null easing value is never used with web-animations

Closes #9780
Closes #9752
This commit is contained in:
Matias Niemelä 2016-07-02 02:00:46 -07:00
parent 3fe1cb0253
commit 9cc3b2ca9e
2 changed files with 19 additions and 2 deletions

View File

@ -48,13 +48,18 @@ export class WebAnimationsDriver implements AnimationDriver {
formattedSteps = [start, start];
}
var playerOptions = {
var playerOptions: {[key: string]: string | number} = {
'duration': duration,
'delay': delay,
'easing': easing,
'fill': 'both' // we use `both` because it allows for styling at 0% to work with `delay`
};
// we check for this to avoid having a null|undefined value be present
// for the easing (which results in an error for certain browsers #9752)
if (easing) {
playerOptions['easing'] = easing;
}
var player = this._triggerWebAnimation(anyElm, formattedSteps, playerOptions);
return new WebAnimationsPlayer(player, duration);

View File

@ -12,6 +12,7 @@ import {el} from '@angular/platform-browser/testing/browser_util';
import {AnimationKeyframe, AnimationStyles} from '../../core_private';
import {DomAnimatePlayer} from '../../src/dom/dom_animate_player';
import {WebAnimationsDriver} from '../../src/dom/web_animations_driver';
import {StringMapWrapper} from '../../src/facade/collection';
import {MockDomAnimatePlayer} from '../../testing/mock_dom_animate_player';
class ExtendedWebAnimationsDriver extends WebAnimationsDriver {
@ -102,5 +103,16 @@ export function main() {
var options = details['options'];
expect(options['easing']).toEqual('ease-out');
});
it('should only apply the provided easing if present', () => {
var startingStyles = _makeStyles({});
var styles = [_makeKeyframe(0, {'color': 'green'}), _makeKeyframe(1, {'color': 'red'})];
driver.animate(elm, startingStyles, styles, 1000, 1000, null);
var details = driver.log.pop();
var options = details['options'];
var keys = StringMapWrapper.keys(options);
expect(keys.indexOf('easing')).toEqual(-1);
});
});
}