diff --git a/modules/@angular/platform-browser/src/dom/web_animations_driver.ts b/modules/@angular/platform-browser/src/dom/web_animations_driver.ts index 7486333667..0ee68f936c 100644 --- a/modules/@angular/platform-browser/src/dom/web_animations_driver.ts +++ b/modules/@angular/platform-browser/src/dom/web_animations_driver.ts @@ -54,6 +54,9 @@ export class WebAnimationsDriver implements AnimationDriver { playerOptions['easing'] = easing; } + // there may be a chance a NoOp player is returned depending + // on when the previous animation was cancelled + previousPlayers = previousPlayers.filter(filterWebAnimationPlayerFn); return new WebAnimationsPlayer( element, formattedSteps, playerOptions, previousPlayers); } @@ -71,3 +74,7 @@ function _populateStyles(styles: AnimationStyles, defaultStyles: {[key: string]: }); return data; } + +function filterWebAnimationPlayerFn(player: AnimationPlayer) { + return player instanceof WebAnimationsPlayer; +} diff --git a/modules/@angular/platform-browser/test/dom/web_animations_driver_spec.ts b/modules/@angular/platform-browser/test/dom/web_animations_driver_spec.ts index a608fe54fb..6fe554a6ca 100644 --- a/modules/@angular/platform-browser/test/dom/web_animations_driver_spec.ts +++ b/modules/@angular/platform-browser/test/dom/web_animations_driver_spec.ts @@ -6,12 +6,13 @@ * found in the LICENSE file at https://angular.io/license */ +import {AnimationPlayer} from '@angular/core'; import {el} from '@angular/platform-browser/testing/browser_util'; import {DomAnimatePlayer} from '../../src/dom/dom_animate_player'; import {WebAnimationsDriver} from '../../src/dom/web_animations_driver'; import {WebAnimationsPlayer} from '../../src/dom/web_animations_player'; -import {AnimationKeyframe, AnimationStyles} from '../../src/private_import_core'; +import {AnimationKeyframe, AnimationStyles, NoOpAnimationPlayer} from '../../src/private_import_core'; import {MockDomAnimatePlayer} from '../../testing/mock_dom_animate_player'; class ExtendedWebAnimationsDriver extends WebAnimationsDriver { @@ -71,9 +72,26 @@ export function main() { const keys = Object.keys(options); expect(keys.indexOf('easing')).toEqual(-1); }); + + it('should only apply the provided easing if present', () => { + const previousPlayers = [ + new NoOpAnimationPlayerWithStyles(), + new NoOpAnimationPlayerWithStyles(), + new NoOpAnimationPlayerWithStyles(), + ]; + const startingStyles = _makeStyles({}); + const styles = [_makeKeyframe(0, {}), _makeKeyframe(1, {})]; + const player = driver.animate( + elm, startingStyles, styles, 1000, 1000, null, previousPlayers); + expect(player.previousStyles).toEqual({}); + }); }); } +class NoOpAnimationPlayerWithStyles extends NoOpAnimationPlayer { + private _captureStyles() { return {color: 'red'}; } +} + function _formatOptions(player: WebAnimationsPlayer): {[key: string]: any} { return {'element': player.element, 'keyframes': player.keyframes, 'options': player.options}; }