Angular 2动画首次初始化

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>

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

Answer 1

每当profileState-trigger更改为其状态之一时，就会触发该事件。 如果您的state变量包含"deselected"作为初始状态，则会触发(done) ，因为从void => deselected过渡。

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

例如

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

希望这可以帮助！