角度：使用query（）+ animate（）时如何保持最终动画状态 [英] Angular: How to keep final animation state when using query() + animate()

问题描述

请参阅以下示例： https://plnkr.co/edit/mqwJP75zjTUmsqsqRxfH?p=preview

这是与Angular v5.1.3。一起使用的。

This is with Angular v5.1.3.

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

There are buttons to toggle between the up+fade-in (opacity 1) and down+fade-out (opacity 0) states. I'm confused why the down state reverts back to the original values after the animation ends, and what I should be doing to cause the animation to hold its final values.

请注意，由于 state（） nofollow noreferrer> https://github.com/angular/angular/issues/18775 （不允许与 query（）结合使用）。另外，我知道我可以不用使用 query（）来完成此特定示例，但是我比一般人更感兴趣于解决一般情况下的问题。

Note that I'm explicitly not using state() because of https://github.com/angular/angular/issues/18775 (it's not allowed in combination with query()). Also, I recognize that I might be able to accomplish this specific example without using query(), but I'm more interested in solving this in the general case than I am in making the specific plunker example work.

推荐答案

例如，定义切换状态

您必须在元素中添加 @ toggle.start 和 @ toggle.done

You must add @toggle.start and @toggle.done in your element

<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');
  }
}

这篇关于角度：使用query（）+ animate（）时如何保持最终动画状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！