Question

我在这里有一个组件动画：

animations:  [
    trigger('profilemenuState', [
        state('deselected', style({
            width: '8.3%'
        })),
        state('selected', style({
            width: '30%'
        })),
        transition('deselected => selected', animate('500ms ease-in')),
        transition('selected => deselected', animate('500ms ease-out'))
    ])
]

和html模板如：

<div [@profilemenuState]="state"
     (@profilemenuState.done)="test()">
</div>

问题是，在done切换之前，事件state在初始加载时触发了什么？

Answer 1

每次profileState-trigger更改为其中一个状态时，都会触发该事件。如果您的state变量包含"deselected"作为初始状态，则(done)因void => deselected的转换而被解雇。

如果要区分test()方法中的不同状态，可以将其更改为test($event)，并获得注入方法的AnimationTransitionEvent类型的参数。在那里，您可以获得有关当前状态的一些信息。

e.g。

test(event: AnimationTransitionEvent) {
    console.log(event.toState);
}

希望这有帮助！

Angular 2动画首先是init

1 个答案: