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

feat(animations): expose the `triggerName` within the transition event 

Closes #13600
This commit is contained in:
Matias Niemelä 2016-12-20 16:02:50 -08:00
parent 4bae4b3bb5
commit 3f67ab074a
6 changed files with 64 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
modules/@angular/compiler/src/animation/animation_compiler.ts
View File

@ -294,8 +294,8 @@ class _AnimationBuilder implements AnimationAstVisitor {
statements.push(new o.ReturnStatement(
o.importExpr(createIdentifier(Identifiers.AnimationTransition)).instantiate([
_ANIMATION_PLAYER_VAR, _ANIMATION_FACTORY_ELEMENT_VAR, _ANIMATION_CURRENT_STATE_VAR,
_ANIMATION_NEXT_STATE_VAR, _ANIMATION_TIME_VAR
_ANIMATION_PLAYER_VAR, _ANIMATION_FACTORY_ELEMENT_VAR, o.literal(this.animationName),
_ANIMATION_CURRENT_STATE_VAR, _ANIMATION_NEXT_STATE_VAR, _ANIMATION_TIME_VAR
])));
return o.fn(

7
modules/@angular/core/src/animation/animation_transition.ts
View File

@ -12,8 +12,8 @@ import {AnimationTransitionEvent} from './animation_transition_event';
export class AnimationTransition {
constructor(
private _player: AnimationPlayer, private _element: ElementRef, private _fromState: string,
private _toState: string, private _totalTime: number) {}
private _player: AnimationPlayer, private _element: ElementRef, private _triggerName: string,
private _fromState: string, private _toState: string, private _totalTime: number) {}
private _createEvent(phaseName: string): AnimationTransitionEvent {
return new AnimationTransitionEvent({
@ -21,7 +21,8 @@ export class AnimationTransition {
toState: this._toState,
totalTime: this._totalTime,
phaseName: phaseName,
element: this._element
element: this._element,
triggerName: this._triggerName
});
}

7
modules/@angular/core/src/animation/animation_transition_event.ts
View File

@ -44,18 +44,21 @@ export class AnimationTransitionEvent {
public totalTime: number;
public phaseName: string;
public element: ElementRef;
public triggerName: string;
constructor({fromState, toState, totalTime, phaseName, element}: {
constructor({fromState, toState, totalTime, phaseName, element, triggerName}: {
fromState: string,
toState: string,
totalTime: number,
phaseName: string,
element: any
element: any,
triggerName: string
}) {
this.fromState = fromState;
this.toState = toState;
this.totalTime = totalTime;
this.phaseName = phaseName;
this.element = new ElementRef(element);
this.triggerName = triggerName;
}
}

42
modules/@angular/core/test/animation/animation_integration_spec.ts
View File

@ -1794,6 +1794,48 @@ function declareTests({useJit}: {useJit: boolean}) {
expect(elements[i].nativeElement).toBe(targetElements[i]);
}
}));
it('should expose the trigger associated with the animation within the callback event',
fakeAsync(() => {
TestBed.overrideComponent(DummyIfCmp, {
set: {
template: `
<div *ngIf="exp"
@t1
(@t1.start)="callback($event)"
(@t1.done)="callback($event)"></div>
<div *ngIf="exp"
@t2
(@t2.start)="callback($event)"
(@t2.done)="callback($event)"></div>
`,
animations: [
trigger('t1', [transition('* => *', [animate(1000)])]),
trigger('t2', [transition('* => *', [animate(1000)])])
]
}
});
const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver;
const fixture = TestBed.createComponent(DummyIfCmp);
const cmp = fixture.componentInstance;
let triggers: string[] = [];
cmp.callback = (e: AnimationTransitionEvent) =>
triggers.push(`${e.triggerName}-${e.phaseName}`);
cmp.exp = true;
fixture.detectChanges();
flushMicrotasks();
expect(triggers).toEqual(['t1-start', 't2-start']);
triggers = [];
driver.log.shift()['player'].finish();
driver.log.shift()['player'].finish();
expect(triggers).toEqual(['t1-done', 't2-done']);
}));
});
describe('ng directives', () => {

9
modules/@angular/platform-webworker/test/web_workers/worker/renderer_animation_integration_spec.ts
View File

@ -9,7 +9,6 @@
import {AUTO_STYLE, AnimationTransitionEvent, Component, Injector, ViewChild, animate, state, style, transition, trigger} from '@angular/core';
import {DebugDomRootRenderer} from '@angular/core/src/debug/debug_renderer';
import {ElementRef} from '@angular/core/src/linker/element_ref';
import {ViewChild} from '@angular/core/src/metadata/di';
import {RootRenderer} from '@angular/core/src/render/api';
import {TestBed, fakeAsync, flushMicrotasks} from '@angular/core/testing';
import {MockAnimationPlayer} from '@angular/core/testing/testing_internal';
@ -207,12 +206,14 @@ export function main() {
uiDriver.log.shift()['player'].finish();
const [triggerOneStart, triggerOneDone] = log['one'];
expect(triggerOneStart.triggerName).toEqual('one');
expect(triggerOneStart.fromState).toEqual('a');
expect(triggerOneStart.toState).toEqual('b');
expect(triggerOneStart.totalTime).toEqual(500);
expect(triggerOneStart.phaseName).toEqual('start');
expect(triggerOneStart.element instanceof ElementRef).toEqual(true);
expect(triggerOneDone.triggerName).toEqual('one');
expect(triggerOneDone.fromState).toEqual('a');
expect(triggerOneDone.toState).toEqual('b');
expect(triggerOneDone.totalTime).toEqual(500);
@ -222,12 +223,14 @@ export function main() {
uiDriver.log.shift()['player'].finish();
const [triggerTwoStart, triggerTwoDone] = log['two'];
expect(triggerTwoStart.triggerName).toEqual('two');
expect(triggerTwoStart.fromState).toEqual('c');
expect(triggerTwoStart.toState).toEqual('d');
expect(triggerTwoStart.totalTime).toEqual(1000);
expect(triggerTwoStart.phaseName).toEqual('start');
expect(triggerTwoStart.element instanceof ElementRef).toEqual(true);
expect(triggerTwoDone.triggerName).toEqual('two');
expect(triggerTwoDone.fromState).toEqual('c');
expect(triggerTwoDone.toState).toEqual('d');
expect(triggerTwoDone.totalTime).toEqual(1000);
@ -263,6 +266,7 @@ export function main() {
uiDriver.log.shift()['player'].finish();
const start1 = cmp1Log['start'];
expect(start1.triggerName).toEqual('myTrigger');
expect(start1.fromState).toEqual('void');
expect(start1.toState).toEqual('off');
expect(start1.totalTime).toEqual(500);
@ -270,6 +274,7 @@ export function main() {
expect(start1.element instanceof ElementRef).toBe(true);
const done1 = cmp1Log['done'];
expect(done1.triggerName).toEqual('myTrigger');
expect(done1.fromState).toEqual('void');
expect(done1.toState).toEqual('off');
expect(done1.totalTime).toEqual(500);
@ -281,6 +286,7 @@ export function main() {
uiDriver.log.shift()['player'].finish();
const start2 = cmp2Log['start'];
expect(start2.triggerName).toEqual('myTrigger');
expect(start2.fromState).toEqual('void');
expect(start2.toState).toEqual('on');
expect(start2.totalTime).toEqual(1000);
@ -288,6 +294,7 @@ export function main() {
expect(start2.element instanceof ElementRef).toBe(true);
const done2 = cmp2Log['done'];
expect(done2.triggerName).toEqual('myTrigger');
expect(done2.fromState).toEqual('void');
expect(done2.toState).toEqual('on');
expect(done2.totalTime).toEqual(1000);

4
tools/public_api_guard/core/index.d.ts vendored
View File

@ -113,12 +113,14 @@ export declare class AnimationTransitionEvent {
phaseName: string;
toState: string;
totalTime: number;
constructor({fromState, toState, totalTime, phaseName, element}: {
triggerName: string;
constructor({fromState, toState, totalTime, phaseName, element, triggerName}: {
fromState: string;
toState: string;
totalTime: number;
phaseName: string;
element: any;
triggerName: string;
});
}