angular - Angular :使用query()+ animate()时如何保持最终动画状态

Question

看这个强盗：https://plnkr.co/edit/mqwJP75zjTUmsqsqRxfH?p=preview
这是Angular V5.1.3的版本。
有按钮可以在向上+淡入（不透明度1）和向下+淡出（不透明度0）状态之间切换。我很困惑为什么在动画结束后倒退状态回到原来的值，以及我应该做些什么来让动画保持它的最终值。
注意，由于https://github.com/angular/angular/issues/18775（不允许与state()结合使用），我没有显式地使用query()。此外，我认识到，如果不使用query()，我也许能够完成这个具体的例子，但是我更感兴趣的是在一般情况下解决这个问题，而不是让我做特定的柱塞示例工作。

Answer 1

例如，对于define toggle state
必须在元素中添加@toggle.start和@toggle.done。

<div [@toggle]="show" 
     (@toggle.start)="animationStarted($event)"
     (@toggle.done)="animationDone($event)">

    <!-- Your HTML code here -->

</div>

并在相关类中定义方法

export class Toggle {
  animationStarted($event) {
    console.log('Start');
  }

  animationDone($event) {
    console.log('End');
  }
}