diff --git a/packages/animations/browser/src/render/transition_animation_engine.ts b/packages/animations/browser/src/render/transition_animation_engine.ts index 992ebf3cb0..b0be786100 100644 --- a/packages/animations/browser/src/render/transition_animation_engine.ts +++ b/packages/animations/browser/src/render/transition_animation_engine.ts @@ -1169,8 +1169,17 @@ export class TransitionAnimationEngine { if (details && details.removedBeforeQueried) return new NoopAnimationPlayer(); const isQueriedElement = element !== rootElement; - const previousPlayers = flattenGroupPlayers( - (allPreviousPlayersMap.get(element) || EMPTY_PLAYER_ARRAY).map(p => p.getRealPlayer())); + const previousPlayers = + flattenGroupPlayers((allPreviousPlayersMap.get(element) || EMPTY_PLAYER_ARRAY) + .map(p => p.getRealPlayer())) + .filter(p => { + // the `element` is not apart of the AnimationPlayer definition, but + // Mock/WebAnimations + // use the element within their implementation. This will be added in Angular5 to + // AnimationPlayer + const pp = p as any; + return pp.element ? pp.element === element : false; + }); const preStyles = preStylesMap.get(element); const postStyles = postStylesMap.get(element); diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts index 1884f35567..b6c9ddcee6 100644 --- a/packages/core/test/animation/animation_integration_spec.ts +++ b/packages/core/test/animation/animation_integration_spec.ts @@ -868,6 +868,87 @@ export function main() { expect(pp[2].currentSnapshot).toEqual({opacity: AUTO_STYLE}); }); + it('should provide the styling of previous players that are grouped and queried and make sure match the players with the correct elements', + () => { + @Component({ + selector: 'ani-cmp', + template: ` +