Angular：使用query（）+ animate（）时如何保持最终动画状态

Question

看到这个plunker： https ：//plnkr.co/edit/mqwJP75zjTUmsqsqRxfH ？ p = preview

这是Angular v5.1.3。

在向上+淡入（不透明度1）和向下淡出（不透明度0）状态之间切换按钮。 我很困惑为什么在动画结束后down状态恢复到原始值，以及我应该做什么来使动画保持其最终值。

请注意，由于https://github.com/angular/angular/issues/18775 （我不允许与query()结合使用，因此我明确地不使用state() query() ）。 另外，我认识到我可以在不使用query()情况下完成这个具体的例子，但是我在一般情况下比在使特定的plunker示例工作时更感兴趣。

Answer 1

例如，用于定义切换状态

您必须在元素中添加@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');
  }
}