问题标签 [angular2-animation]

I would like to pass dynamic variable to angular @Component class decorator.

As you can see from example there is a list of items. I would like each item to be initially rotated with different degree -${DYNAMIC_DEGREE_VAR}.

If I set transform to random value directly: rotate(${Math.floor(Math.random() * 15 + 1)}deg) - each item will have same random value.

Any tips appreciated.

我正在尝试构建一个进度条组件，进度条从左侧滑入。

我有一个解决方案，其中条形的宽度固定为 40%，但是我的组件需要一个输入，这是所需的百分比。

是否可以使用包含宽度的属性执行上述操作？还是有其他或更好的方法来做到这一点？

当时间改变时，例如。second/min/hours/day，我想将动画放在特定的 div 块中。也许我无法弄清楚如何继续前进。

演示：https ://plnkr.co/edit/jvffeaWFCF6eazdIt3OT?p=preview

当第二个变化时，数字应该来自顶部和底部的动画是需要的。

app.component.ts

动画结束后如何隐藏（从 DOM 中移除——比如使用 '*ngIf'）元素？

这是一些代码：

“非活动”动画结束后如何隐藏元素？

这是我的模板

如您所见，在 Hello 和 Everyone 文本之间包含下划线的span元素。div

我的组件中切换文本颜色的方法（动画是使用组件装饰器中定义的角度动画完成的）

如何获取span包含下划线的元素以便更改它的颜色？

我不想使用 jQuery 或 Angular2 的 elementRef。

我正在尝试使用角度动画构建滑入滑出类型的滑块，但我面临一些问题，例如......

• 它正在脱离分裂（我知道这是因为我使用了 translateY(-100%)，但是还有什么替代方法？）
• 当一次显示两个 div 时，它会增加 div 的大小。

这是我的 HTML 代码。

这是我的应用程序组件...

提前致谢。:)

我正在尝试使用 Angular 2 动画“滑动切换”一个元素。

https://plnkr.co/edit/Dof60vwHp79eiThhj9vW?p=preview

上面的代码有效，但我无法准确看到高度的过渡。我知道不可能在 CSS 中用 'auto' 值对 'height' 属性进行动画处理。

为了自动生成高度，是否可以使其类似于，

?

谢谢。

我正在使用 Angular2 和 Material Design Lite 制作一些可扩展的面板。我已按照 Angular2 网站上的教程进行操作，但是当单击一个面板时，会触发每个项目上的可扩展面板。

这是我的代码：

和 HTML

我尝试将 HTML 上的标记更改为

和切换按钮

但随后动画完全停止工作。希望有任何帮助指出我哪里出错了。

我有 2 个组件：

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

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

我要做的是：

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

我的问题是：

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

基本上，我希望能够在满足条件时将动画应用到特定的框。在我的应用程序中，当用户给出问题 1 的答案（在 Component1 中）-> 通过共享服务 -> 在 COMponent2 中，我会收到有关它的通知，如果答案正确，我将使用 id=1 缩放框（我用 id 只是为了指出盒子特异性的重要性）

添加的[@triggerName] = "my_value_from_expression"价值无效，*ngFor但价值存在；

如果我这样做：ng.probe($0)._debugInfo._view.changeDetectorRef._view在盒子上，给我这个（_expr_3 是看起来的值）：

...

_el_0:div#1.box

_expr_2：“1”

_expr_3:"animate1"

_expr_4:"Box1"

...

所以我有这个：

框架组件.ts

frame.component.html

我尝试做的是使用 ngfor 添加正确的值，[@boxScale]因此结果应该是：

animate1前两个硬编码元素与这些和变量一起工作得很好，animate2但另外两个生成的*ngFor根本不工作。

我在这里做错了什么？