Angular 2为特定目标元素设置动画

Question

我有两个组成部分：

1. 一个包含router-outlet的地方，其中会有一个问题和三个可能的答案注入页面

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

我做的是：

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

我的问题是：

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

Answer 1

使用Animate.css非常容易应用动画。就像，脑死亡容易。我知道有一种以Angular2为中心的方式与提供者之类的方式（我实际上是在我的一个角度项目中这样做），但在另一个项目中，我做了不同的事情，发现它更容易而且更灵活。

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

说一个按钮（无论出于何种原因）可以是蓝色或红色。因此，您希望默认动画遵循按钮颜色。如果按钮改变颜色，则需要更改动画。

易。

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

想要＆＃34;重启＆＃34;动画？只需使用变量重置ngClass。当更改检测结束时，将应用新值。

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

（其中myAnimationVariable类似于＆＃34;动画摆动＆＃34;或其他）。

无论如何，我发现它非常简单，轻巧，有效。我曾经多次听到它不是纯粹的角度＆＃34;方式，但这对我来说并不重要。我正在捆绑/解析CSS并在模板中使用它而不直接访问DOM，这很适合我。

注意，您也可以将这些类应用于ViewChild的nativeElement。效果很好。但是，那就是“访问DOM＆＃34; （即使你是通过Angular-gated机制完成的），也可能不赞成。但是，如果它提供了解决方案并且可以进行测试，那么它是实用的，所以我想指出它。