Question

请参阅此plunker：https://plnkr.co/edit/mqwJP75zjTUmsqsqRxfH?p=preview

这是Angular v5.1.3。

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

请注意，由于https://github.com/angular/angular/issues/18775，我明确没有使用query()（不允许与query()结合使用）。另外，我认识到我可以在不使用text1 = 'cat is sleeping on the mat'. text2 = 'The cat is sleeping on the red mat in the living room'.的情况下完成这个具体的例子，但是我对在一般情况下解决这个问题比在特定的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');
  }
}

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

1 个答案: