时间戳

首页 > 解决方案 > Angular 2 中的动画与纯 CSS

css - Angular 2 中的动画与纯 CSS

问题描述

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

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

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

这是一个描述我的问题的堆栈闪电战。

标签： cssangularanimation

解决方案

它可以通过 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>

推荐阅读