在执行动画时，可以使用[@myAnimation]="{value: true}"将一个trigger绑定到元素上。然后，你可以实现状态，当作为动画参数传递的任意变化时，该状态会给出不同的动画。在你的trigger中，你可以使用元素状态列表来定义所有这些状态。

可以使用两个不同的状态来定义你的动画，例如一个active和一个inactive。当你的动画完成时，你仍然想留在active状态，这意味着你必须告诉Angular不要重置样式。这可以通过将@.disabled变量设置为true来实现。

示例代码如下：

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations: [ trigger('myAnimation', [ state('active', style({ backgroundColor: 'red' })), state('inactive', style({ backgroundColor: 'blue' })), transition('inactive <=> active', [ animate(1000) ]) ]) ] }) export class AppComponent { isAnimating = false; //设置默认状态为未有动画 toggleAnimation() { this.isAnimating = true; setTimeout(() => { this.isAnimating = false; }, 2000); } }

在这里，我们定义了一个触发器@myAnimation，有两个不同的状态：active和inactive，它们都有不同的背景颜色。在HTML模板中，我们将此触发器绑定到一个按钮上，并在按钮点击时切换它。

这里又有一点需要注意：当触发器处于激活状态时，我们不希望Angular重置元素样式，所以我们将其禁用。

这种方法可确保在动画完成后不重置样式，因此你的元素将保持其动画状态。