角度动画不会为新组件设置动画答案

【问题标题】：Angular animations doesn't animate new component角度动画不会为新组件设置动画
【发布时间】：2019-10-28 20:24:46
【问题描述】：

我正在尝试为我的应用程序中新的角度组件的创建/删除设置动画。

具体来说，我正在尝试为不透明度设置动画（例如，fadeIn 效果）。我注意到动画似乎在普通的 html 元素（div 等）上运行良好，但是当应用于 angular 组件时却不行。我创建了以下 Stackblitz 来演示这个问题。

我希望两个块都以相同的方式制作动画，但只有第一个可以。我注意到直接在 Devtools 中对元素应用 0.5 不透明度也没有效果。那么这只是 HTML 的限制吗？我一直无法找到任何直接的答案。

在不必查询视图本身的情况下为我的组件设置动画并为其第一个子项设置动画的替代解决方案是什么？

【问题讨论】：

【解决方案1】：

你好吗？

要为组件制作动画，您应该使用元数据animations，就像您在AppComponent 上所做的那样。 Angular 已经实现了这种方式，我认为它为您提供了更大的灵活性来设置组件样式。

通常，您不会在一个组件中只有一个 div，并且您可能希望单独地为它们设置动画。同样，您可以播放路由动画，因此最好使用animations 元数据标签。

如果您只是想在不同的组件中重复使用动画，那完全没问题，实际上也很简单。您可以通过共享属性共享您的触发操作。

我已经 fork 你的 Stackblitz 来展示它：https://stackblitz.com/edit/angular-swvfdy

干杯！！

【讨论】：