0

我有 2 个组件：

  1. 一个包含一个router-outlet问题和 3 个可能答案的页面

  2. 第二个是一种预览，包含 20 个框我使用共享服务（BehaviorSubject）进行组件通信

我要做的是：

  • 当用户从/question1路由中选择答案时，我使用该服务发出一个唯一值（每个答案都有一个唯一值）
  • 在预览组件中，我订阅了发出的任何服务，并且我确切地知道什么是问题以及提交了什么答案
  • 现在，根据该特定答案，我需要从第二个组件中为特定框设置动画

我的问题是：

如何为该特定框应用通用动画。我不想创建 20 个不同名称的不同动画，或 20 个具有真值或假值的唯一变量。我想要一种方法来定位一个盒子并应用我的动画

4

1 回答 1

1

使用 Animate.css 很容易应用动画。就像，脑残容易。我知道有一种以 Angular2 为中心的方式来处理提供程序等（实际上我在我的一个 Angular 项目中就是这样做的），但在另一个项目中我做了不同的事情，发现它更容易、更灵活。

您下载 animate.css，将其与任何其他 CSS 文件一样捆绑到您的构建中，然后您就完成了设置。您可以通过 ngClass 动态应用类来为您的应用程序中的任何内容设置动画。您可以根据任何条件更改任何元素上的动画。

假设一个按钮（无论出于何种原因）可以是蓝色或红色。因此，您希望默认动画跟随按钮颜色。如果按钮改变颜色，你希望动画改变。

简单的。

<div [ngClass]="color === 'blue' ? 'animated pulse' : 'animated wobble'"
     ....></div>

想要“重启”动画？只需使用变量重置 ngClass。当更改检测开始时，将应用新值。

<div [ngClass]="myAnimationVariable"
     ....></div>

（其中 myAnimationVariable 类似于“动画摆动”或其他）。

无论如何，我发现它非常简单、轻量且有效。我听说过几次这不是“纯角度”方式，但这对我来说真的无关紧要。我正在捆绑/解析 CSS 并在模板中使用它而不直接访问 DOM，这很适合我。

请注意，您还可以将类应用于 ViewChild 的 nativeElement。效果很好。但这走的是“访问 DOM”的路线（即使你是通过 Angular 门控机制来做的），并且可能会不受欢迎。但是如果它提供了一个解决方案并且可以测试，那么它是实用的，所以我想指出它。

于 2017-02-06T13:42:09.303 回答