Angular 2为特定的目标元素设置动画 [英] Angular 2 animate a specific targeted element

问题描述

我有2个组成部分:

1. 其中一个包含一个router-outlet，其中将插入一个带有问题和3个可能答案的页面

1. One which contain arouter-outlet where will be injected pages with a question and 3 possible answers

第二个预览，包含20个框 我使用共享服务(BehaviorSubject)进行组件通信

Second that is a sort of preview, that contains 20 boxes I use a shared service(BehaviorSubject) for components communication

我要做什么:

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

• when user choose an answer from /question1 route, I use the service to emit a unique value(every answer have a unique value)
• in the preview component I've subscribed to whatever service emits, and I know exactly what question is and what answer is submitted
• now, accordingly to that specific answer I need to animate a specific box from this second component

我的问题是:

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

How do I apply a generic animation for that specific box. I don't want to create 20 different animations with different names, or 20 unique variables that will have true or false values. I want a way to target a box and apply my animation

推荐答案

使用Animate.css可以很容易地应用动画.就像，脑残容易.我知道有一种以Angular2为中心的方式来与提供程序之类(例如，我实际上是在我的一个角度项目中这样做的)，但是在另一个项目中我做了不同的选择，发现它更容易，更灵活.

Animation is very easy to apply with Animate.css. Like, braindead easy. I know there's an Angular2-centric way of doing it with providers and the like (and I actually did it that way in one of my angular projects), but in another project I did it differently and found it to be easier and more flexible.

您下载了animate.css，将其像其他CSS文件一样捆绑到自己的版本中，设置完成.您可以通过ngClass动态应用类来为应用中的任何内容设置动画.您可以根据任何条件在任何元素上更改动画.

You download animate.css, bundle it into your build like any other CSS file, and you're done with setup. You can animate anything in your app just by dynamically applying classes via ngClass. You can change the animation on any element however you want based on any condition.

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

Say a button (for whatever reason) can be blue, or red. So you want the default animation to follow the button color. If the button changes color, you want the animation to change.

容易.

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

是否要重新启动"动画?只需使用变量重置ngClass.变更检测开始时，将应用新值.

Want to "reboot" the animation? Just reset the ngClass using a variable. When change detection kicks over, the new value will be applied.

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

(其中myAnimationVariable类似于动画摆动"之类的东西).

(where myAnimationVariable is something like "animated wobble" or whatever).

无论如何，我发现它极其简单，轻巧且有效.我已经听过好几次了，这不是纯粹的角度"方式，但这对我来说真的无关紧要.我捆绑/解析CSS并在模板中使用它，而无需直接访问DOM，这很适合我.

Anyway, I find it extremely easy, lightweight, and effective. I've heard a couple of times it's not the "pure angular" way, but that really doesn't matter to me. I'm bundling/parsing the CSS and using it in templates without directly accessing the DOM, that suits me fine.

请注意，您也可以将类应用于ViewChild的nativeElement.效果很好.但这走了访问DOM"的路线(即使您是通过Angular门控机制完成的)，并且可能对此并不满意.但是，如果它提供了解决方案并且可以进行测试，那么它是实用的，因此我指出了这一点.

Note you can also apply the classes to the nativeElement of a ViewChild. Works great. But that's walking the line of "accessing the DOM" (even though you are doing it through an Angular-gated mechanism), and may be frowned upon. But if it provides a solution and can be tested, then it's practical, so figured I'd point it out.

这篇关于Angular 2为特定的目标元素设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！