问题标签 [angular-animations]

基本上，我想利用 angular 中的 web-animations-api polyfill（目前为 4 个）对元素执行无限动画。

让我们看一个基本的非角度示例：

我如何将其翻译成 Angular？

这是我迄今为止尝试过的，但只能工作一次：

有没有办法使用 @angular/animation 插件来做到这一点，而不是存储一个 ElementRef 并按照上面的示例进行操作？或者我误解了这个插件的用途？

提前致谢。

我最近将我的 Angular 应用程序更新到 4.0，以便利用路线之间的动画。

下面是我的动画功能：

出于某种原因，当我将一个转换的时间更改为与另一个相同（即将“0.7s”更改为“0.8s”）时，我收到以下错误：

这两个动画不应重叠，stateChangeExpr因为每个过渡的动画都不同。

我错过了什么？

我最近更新到 angular 4 并检查了我看到的动画文档，我应该从 @angular/animations 导入触发器、动画和过渡。

然而，在我的项目中，到目前为止，我一直从 @angular/core 导入并且一切正常，即使在动画与核心分离之后也是如此。

为什么角核心仍然持有这些动画组件？向后兼容可能吗？为什么不直接将其从核心中完全移除？

我在 Angular 中为我的组件添加了一个动画。然而，动画在 Chrome 和 Firefox 中运行良好，但在 IE Edge 中，虽然样式在状态更改时正确应用，但动画不会触发，但只是没有指定动画。

有没有人有同样的问题？

这是我的代码：

提前致谢

我正在尝试在路线更改时做简单的淡入淡出动画，但它不起作用。

我的动画文件是这样的：

我的组件是这样的：

我观察到，如果我设置了一个position: fixedon 状态，它会起作用，但是当动画完成时，视图是固定的，并且应用程序中的布局被破坏了。

我正在使用 Angular 4，我有两个组件，一个嵌套组件（父子组件），简单地想象我的子组件名称是，显然我可以使用HTML 元素将我的子组件child导入其父视图。<app-child>

我有一个动画，当我将动画添加到它时它不起作用，但是当我将动画移动到子组件中时，它就起作用了。

例子

这个动画不行

当我将动画及其逻辑移动到子组件时，它可以工作，这是child组件：

如何使组件（此处<app-child>）具有动画效果？

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

在此示例中，您可以看到应用于表格 tr 的相同动画如何没有动画，而应用于 div 的相同动画如何正确设置动画。

这只发生在 IE11 中。

你对此有什么解释吗？

我想禁用 Angular Material 2 的所有动画，但是当我导入它时，NoopAnimationsModule它也会阻止我在我的应用程序代码的其余部分中使用 Angular Animation 模块。我希望能够为我的应用程序的某些内容设置动画，但禁用 Angular Material 2 的动画。有人知道该怎么做吗？

编辑：我想禁用除涟漪效应之外的所有动画。

我在使用Jest-Preset-Angular对从单独文件导入的主机元素上具有动画的组件运行测试时遇到问题（因此它可以在另一个组件中重用）。

例子.animation.ts

例子.component.ts

事实是，如果我将触发器复制粘贴animations到装饰器的属性中，@Component我的测试就通过了……否则它会失败，因为它似乎找不到动画声明。

有任何想法吗？

我有一个应用于两个 div 的动画，以使它们进入和退出 void 状态。

见：https ://plnkr.co/edit/uCdBafYG7NZxVVppiTpo?p=preview

html:

打字稿：

这些动画有效，但是当状态更改时，它不会应用于第一个动画。我可以通过将动画延迟 1 毫秒来解决这个问题，但这很难看，而且感觉有点 hacky。

有没有更简洁的方法来实现这一点