Angular 6动画前进（Angular中的动画填充模式）

Question

我有一个属性，该属性使用CSS进行了动画处理并可以正常工作：

animation: collapse1 0.3s forwards;

但是现在我需要切换到角度动画。一切正常，除了一件事：动画结束后，它返回到起点。

现在它是这样的：

animation: collapse1 0.3s;

但是它应该像这样工作：

animation: collapse1 0.3s forwards;

换句话说，是否可以在Angular中提供动画填充模式？我正在使用Angular 6。

这是演示： https://stackblitz.com/edit/angular-uw3o6u

演示有2个按钮。

当用户将鼠标移至按钮（：hover css）时有效。 但是当用户单击按钮时（情况2），我需要这种行为。

点击后的最终排名应该是这样：

但是它回到开头：

---

我通过CSS类解决了它： https://stackblitz.com/edit/angular-kdfgxw

但是它仍然不是Angular动画。

有人知道如何使用Angular动画解决它吗？有可能吗？

Answer 1

我有同样的问题。并最终通过像您这样的CSS类来解决。

但是我找到了一个解决方案（它很简单，而且很明显是arf）。 您必须根据情况将最终样式包含在state（）函数中

请参阅：

trigger(openCloseAnimation, [
  state('closed', style({ top: '9px', transform: 'rotate(-45deg)', offset: 1 })),
  transition('open => close',animate(300)),
  transition('close => open', animate(300))
])

顺便说一句，您不能在状态函数内部使用查询，因此对于内部类，您将必须切换为innerTrigger并在父触发器中使用animateChild（）。