Angular 2 中的动画与纯 CSS答案

【问题标题】：Animation in Angular 2 with pure CSSAngular 2 中的动画与纯 CSS
【发布时间】：2021-08-20 00:31:04
【问题描述】：

在我的应用程序中，我有两个组件通过 BehaviorSubject 相互通信，因为它们是兄弟姐妹。我有一个form 和一个card，card 可以是"question" 或" answer"，它的颜色也会相应变化。

为了改变它，我使用 CSS 变量。但每当颜色变化时，我也想要一个“倾斜”动画。我不能使用angular animation，因为动画与data-binded 无关，并且在我的应用程序中，card 组件嵌套在使用"angular animation" 进行动画处理的各种组件中，并且无论如何它都不起作用。

我尝试做的是将一个带有动画的类绑定到我的卡片主 div，但它仅在组件加载时触发。让我的card 在颜色发生变化时倾斜的正确方法是什么？

这是描述我的问题的stackblitz。

【问题讨论】：

请您将您的代码作为我们可以运行的 sn-p 放入问题中 - 请参阅 [link]stackoverflow.com/help/minimal-reproducible-example
我的问题有一个堆栈闪电战，其中包含一个最小的可重现示例。
嗨，是的，我在那里看到了你的问题（基本上就是一旦运行动画，CSS就不会重新运行它）但是为了将来最好将代码放入问题中因为它使人们更容易复制和编辑到答案中，并且如果外部服务失败，它也会保留在那里供人们稍后查看。

标签： css angular animation

【解决方案1】：

使用 Angular 动画可以轻松完成。这是您更新的示例：https://stackblitz.com/edit/angular-ivy-aw3zs3?file=src/app/card/card.component.ts

您只需要提供一个状态函数来处理转换触发器。

transition((fromState: string, toState: string) => toState != fromState, [
// animations
])

而且你需要把动画和目标变量联系起来

<div class="card" [style]="style" [@cardChange]="card.card">
</div>

【讨论】：

此解决方案在 stackbltz 中完美运行，但我的应用程序存在问题。 card 位于动画 div 中，并且在触发动画时消失。是否有机会仅使用 CSS 和类绑定遇到相同的问题？
@TotoBriac 没有理由不在动画开发人员中工作。我认为其他东西可能会被打破。你能举一个更大的例子吗？
我的代码逻辑有些问题，我已修复它，现在运行良好。