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];
|
formattedSteps = [start, start];
|
||||||
}
|
}
|
||||||
|
|
||||||
var playerOptions = {
|
var playerOptions: {[key: string]: string | number} = {
|
||||||
'duration': duration,
|
'duration': duration,
|
||||||
'delay': delay,
|
'delay': delay,
|
||||||
'easing': easing,
|
|
||||||
'fill': 'both' // we use `both` because it allows for styling at 0% to work with `delay`
|
'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);
|
var player = this._triggerWebAnimation(anyElm, formattedSteps, playerOptions);
|
||||||
|
|
||||||
return new WebAnimationsPlayer(player, duration);
|
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 {AnimationKeyframe, AnimationStyles} from '../../core_private';
|
||||||
import {DomAnimatePlayer} from '../../src/dom/dom_animate_player';
|
import {DomAnimatePlayer} from '../../src/dom/dom_animate_player';
|
||||||
import {WebAnimationsDriver} from '../../src/dom/web_animations_driver';
|
import {WebAnimationsDriver} from '../../src/dom/web_animations_driver';
|
||||||
|
import {StringMapWrapper} from '../../src/facade/collection';
|
||||||
import {MockDomAnimatePlayer} from '../../testing/mock_dom_animate_player';
|
import {MockDomAnimatePlayer} from '../../testing/mock_dom_animate_player';
|
||||||
|
|
||||||
class ExtendedWebAnimationsDriver extends WebAnimationsDriver {
|
class ExtendedWebAnimationsDriver extends WebAnimationsDriver {
|
||||||
|
@ -102,5 +103,16 @@ export function main() {
|
||||||
var options = details['options'];
|
var options = details['options'];
|
||||||
expect(options['easing']).toEqual('ease-out');
|
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