fix(animations): ensure a null easing value is never used with web-animations
Closes #9780 Closes #9752
This commit is contained in:
parent
3fe1cb0253
commit
9cc3b2ca9e
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue