From f2ee1dcdb734ae1b2bcaf245cf6de2ab96e5b140 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Thu, 22 Jun 2017 09:42:31 -0700 Subject: [PATCH] fix(animations): do not validate style overlap errors in different transitions --- .../browser/src/dsl/animation_ast_builder.ts | 1 + .../browser/test/dsl/animation_spec.ts | 19 ++++++++++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/animations/browser/src/dsl/animation_ast_builder.ts b/packages/animations/browser/src/dsl/animation_ast_builder.ts index db15b9ba88..d373ab145c 100644 --- a/packages/animations/browser/src/dsl/animation_ast_builder.ts +++ b/packages/animations/browser/src/dsl/animation_ast_builder.ts @@ -73,6 +73,7 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor { private _resetContextStyleTimingState(context: AnimationAstBuilderContext) { context.currentQuerySelector = ROOT_SELECTOR; + context.collectedStyles = {}; context.collectedStyles[ROOT_SELECTOR] = {}; context.currentTime = 0; } diff --git a/packages/animations/browser/test/dsl/animation_spec.ts b/packages/animations/browser/test/dsl/animation_spec.ts index dc40da85a8..d022379e12 100644 --- a/packages/animations/browser/test/dsl/animation_spec.ts +++ b/packages/animations/browser/test/dsl/animation_spec.ts @@ -5,7 +5,7 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ -import {AUTO_STYLE, AnimationMetadata, AnimationMetadataType, animate, animation, group, keyframes, query, sequence, style, useAnimation, ɵStyleData} from '@angular/animations'; +import {AUTO_STYLE, AnimationMetadata, AnimationMetadataType, animate, animation, group, keyframes, query, sequence, style, transition, trigger, useAnimation, ɵStyleData} from '@angular/animations'; import {AnimationOptions} from '@angular/core/src/animation/dsl'; import {Animation} from '../../src/dsl/animation'; @@ -102,6 +102,23 @@ export function main() { /The CSS property "opacity" that exists between the times of "0ms" and "2000ms" is also being animated in a parallel animation between the times of "0ms" and "1500ms"/); }); + it('should not throw an error if animations overlap in different query levels within different transitions', + () => { + const steps = trigger('myAnimation', [ + transition('a => b', group([ + query('h1', animate('1s', style({opacity: 0}))), + query('h2', animate('1s', style({opacity: 1}))), + ])), + + transition('b => a', group([ + query('h1', animate('1s', style({opacity: 0}))), + query('h2', animate('1s', style({opacity: 1}))), + ])), + ]); + + expect(() => validateAndThrowAnimationSequence(steps)).not.toThrow(); + }); + it('should throw an error if an animation time is invalid', () => { const steps = [animate('500xs', style({opacity: 1}))];