Angular 2 中的动画纯 CSS

Question

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

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

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

这是描述我的问题的stackblitz。

Answer 1

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

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

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

并且你需要link带有目标变量的动画

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

Angular 2 中的动画纯 CSS

Animation in Angular 2 with pure CSS

css

animation

angular