From ba46ca683ba0412246928841b7643dc7037df0d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Fri, 17 Jun 2016 16:49:05 -0700 Subject: [PATCH] fix(animations): ensure starting styles are applied when a delay is present Closes #9326 Closes #9328 --- .../platform-browser/src/dom/web_animations_driver.ts | 10 +++++++--- .../test/dom/web_animations_driver_spec.ts | 10 ++++++++++ 2 files changed, 17 insertions(+), 3 deletions(-) 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 f86ac2291a..7003c00a5a 100644 --- a/modules/@angular/platform-browser/src/dom/web_animations_driver.ts +++ b/modules/@angular/platform-browser/src/dom/web_animations_driver.ts @@ -39,9 +39,13 @@ export class WebAnimationsDriver implements AnimationDriver { formattedSteps = [start, start]; } - var player = this._triggerWebAnimation( - anyElm, formattedSteps, - {'duration': duration, 'delay': delay, 'easing': easing, 'fill': 'forwards'}); + var playerOptions = { + 'duration': duration, + 'delay': delay, + 'fill': 'both' // we use `both` because it allows for styling at 0% to work with `delay` + }; + + var player = this._triggerWebAnimation(anyElm, formattedSteps, playerOptions); return new WebAnimationsPlayer(player, duration); } 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 d88651e409..cff2047cb7 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 @@ -74,5 +74,15 @@ export function main() { expect(lastKeyframe['height']).toEqual('555em'); }); + + it('should use a fill mode of `both`', () => { + var startingStyles = _makeStyles({}); + var styles = [_makeKeyframe(0, {'color': 'green'}), _makeKeyframe(1, {'color': 'red'})]; + + driver.animate(elm, startingStyles, styles, 1000, 1000, 'linear'); + var details = driver.log.pop(); + var options = details['options']; + expect(options['fill']).toEqual('both'); + }); }); }