diff --git a/packages/animations/browser/src/render/animation_engine_next.ts b/packages/animations/browser/src/render/animation_engine_next.ts index 4aa25fc0db..7f1fef4b03 100644 --- a/packages/animations/browser/src/render/animation_engine_next.ts +++ b/packages/animations/browser/src/render/animation_engine_next.ts @@ -67,17 +67,20 @@ export class AnimationEngine { this._transitionEngine.removeNode(namespaceId, element, context); } - disableAnimations(element: any, disable: boolean) { - this._transitionEngine.markElementAsDisabled(element, disable); - } - - process(namespaceId: string, element: any, property: string, value: any) { - if (property.charAt(0) == '@') { - const [id, action] = parseTimelineCommand(property); - const args = value as any[]; - this._timelineEngine.command(id, element, action, args); - } else { - this._transitionEngine.trigger(namespaceId, element, property, value); + process(namespaceId: string, element: any, property: string, value: any): boolean { + switch (property.charAt(0)) { + case '.': + if (property == '.disabled') { + this._transitionEngine.markElementAsDisabled(element, !!value); + } + return false; + case '@': + const [id, action] = parseTimelineCommand(property); + const args = value as any[]; + this._timelineEngine.command(id, element, action, args); + return false; + default: + return this._transitionEngine.trigger(namespaceId, element, property, value); } } diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts index 32e779eaed..52acb25d8a 100644 --- a/packages/core/test/animation/animation_integration_spec.ts +++ b/packages/core/test/animation/animation_integration_spec.ts @@ -1815,12 +1815,12 @@ export function main() { selector: 'my-cmp', template: `
-
- {{ item }} + {{ item }}
`, @@ -2153,57 +2153,6 @@ export function main() { expect(cmp.startEvent.totalTime).toEqual(9876); // the done event isn't fired because it's an actual animation })); - - it('should work when there are no animations on the component handling the disable/enable flag', - () => { - @Component({ - selector: 'parent-cmp', - template: ` -
- -
- ` - }) - class ParentCmp { - @ViewChild('child') public child: ChildCmp|null = null; - disableExp = false; - } - - @Component({ - selector: 'child-cmp', - template: ` -
- `, - animations: [trigger( - 'myAnimation', - [transition( - '* => go, * => goAgain', - [style({opacity: 0}), animate('1s', style({opacity: 1}))])])] - }) - class ChildCmp { - public exp = ''; - } - - TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]}); - - const fixture = TestBed.createComponent(ParentCmp); - const cmp = fixture.componentInstance; - cmp.disableExp = true; - fixture.detectChanges(); - resetLog(); - - const child = cmp.child !; - child.exp = 'go'; - fixture.detectChanges(); - - expect(getLog().length).toEqual(0); - resetLog(); - - cmp.disableExp = false; - child.exp = 'goAgain'; - fixture.detectChanges(); - expect(getLog().length).toEqual(1); - }); }); }); diff --git a/packages/platform-browser/animations/src/animation_renderer.ts b/packages/platform-browser/animations/src/animation_renderer.ts index 4b551a96ec..3f57a5b9ab 100644 --- a/packages/platform-browser/animations/src/animation_renderer.ts +++ b/packages/platform-browser/animations/src/animation_renderer.ts @@ -9,9 +9,6 @@ import {AnimationTriggerMetadata} from '@angular/animations'; import {ɵAnimationEngine as AnimationEngine} from '@angular/animations/browser'; import {Injectable, NgZone, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2} from '@angular/core'; -const ANIMATION_PREFIX = '@'; -const DISABLE_ANIMATIONS_FLAG = '@.disabled'; - @Injectable() export class AnimationRendererFactory implements RendererFactory2 { private _currentId: number = 0; @@ -169,11 +166,7 @@ export class BaseAnimationRenderer implements Renderer2 { } setProperty(el: any, name: string, value: any): void { - if (name.charAt(0) == ANIMATION_PREFIX && name == DISABLE_ANIMATIONS_FLAG) { - this.disableAnimations(el, !!value); - } else { - this.delegate.setProperty(el, name, value); - } + this.delegate.setProperty(el, name, value); } setValue(node: any, value: string): void { this.delegate.setValue(node, value); } @@ -181,10 +174,6 @@ export class BaseAnimationRenderer implements Renderer2 { listen(target: any, eventName: string, callback: (event: any) => boolean | void): () => void { return this.delegate.listen(target, eventName, callback); } - - protected disableAnimations(element: any, value: boolean) { - this.engine.disableAnimations(element, value); - } } export class AnimationRenderer extends BaseAnimationRenderer implements Renderer2 { @@ -196,12 +185,9 @@ export class AnimationRenderer extends BaseAnimationRenderer implements Renderer } setProperty(el: any, name: string, value: any): void { - if (name.charAt(0) == ANIMATION_PREFIX) { - if (name.charAt(1) == '.' && name == DISABLE_ANIMATIONS_FLAG) { - this.disableAnimations(el, !!value); - } else { - this.engine.process(this.namespaceId, el, name.substr(1), value); - } + if (name.charAt(0) == '@') { + name = name.substr(1); + this.engine.process(this.namespaceId, el, name, value); } else { this.delegate.setProperty(el, name, value); } @@ -209,13 +195,11 @@ export class AnimationRenderer extends BaseAnimationRenderer implements Renderer listen(target: 'window'|'document'|'body'|any, eventName: string, callback: (event: any) => any): () => void { - if (eventName.charAt(0) == ANIMATION_PREFIX) { + if (eventName.charAt(0) == '@') { const element = resolveElementFromTarget(target); let name = eventName.substr(1); let phase = ''; - // @listener.phase is for trigger animation callbacks - // @@listener is for animation builder callbacks - if (name.charAt(0) != ANIMATION_PREFIX) { + if (name.charAt(0) != '@') { // transition-specific [name, phase] = parseTriggerCallbackName(name); } return this.engine.listen(this.namespaceId, element, name, phase, event => {