iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(animations): do not validate style overlap errors in different transitions

This commit is contained in:
Matias Niemelä 2017-06-22 09:42:31 -07:00
parent 21018af2bf
commit f2ee1dcdb7
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/animations/browser/src/dsl/animation_ast_builder.ts
View File

@ -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;
}

19
packages/animations/browser/test/dsl/animation_spec.ts
View File

@ -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}))];