问题标签 [angular-animations]

在新的 Angular-Material 版本中，您需要为 Angular-Animations 添加一个模块。您可以在两个 BrowserAnimationsModule 和 NoopAnimationsModule 之间进行选择。官方指南指出：

一些 Material 组件依赖于 Angular 动画模块，以便能够进行更高级的转换。如果您希望这些动画在您的应用程序中工作，您必须安装 @angular/animations 模块并将 BrowserAnimationsModule 包含在您的应用程序中。

如果您不想在项目中添加其他依赖项，可以使用 NoopAnimationsModule。

我不太明白这里有什么区别。似乎完全一样 :) 这两个模块有什么区别？

我正在尝试在 Angular 4 项目中工作的路线之间获得动画 - 但需要能够根据用户在应用程序中导航的方式来改变动画的方向（translateX）。

我发现在 DOM 中保留进入和退出组件的唯一方法是使用 void 状态。

另外，我必须将动画绑定到宿主元素。如果我尝试将其绑定到组件内的元素，则退出组件将被替换为进入组件。

我想要这个，因为我不希望退出组件消失 - 我希望它在进入组件滑入时滑落以获得流畅的原生感觉应用程序。

我有一个带有四个转换的触发器：

在我的组件导出类中，我将其绑定到组件宿主元素：

我可以进行操作routing（将其设置为“后退”或“前进”以控制方向），但这似乎创建了一个变量的新实例，因此如果我想更改动画方向，退出页面的动画方向与传入的方向相反组件，因为 的实例routing似乎没有改变。

有没有办法更新routing绑定到宿主元素的实例？有没有其他方法可以达到我需要的结果？

谢谢。

我有一个包含字段的表单组件，有些字段我想在它们出现在表单中时设置动画，但不是每个字段。

使用其他属性，我可以做这样的事情[attr.required]="field.Required"但[attr.@slideOut]似乎不起作用。

理想情况下，我想在我的领域有一个动画属性，这样我就可以传递这样的动画，[@field.Animation]但我找不到任何关于我将如何做这样的事情的文档。有任何想法吗？

当我添加 web 动画 polyfill 时，任何人都知道 Angular 动画是否也与 Firefox 不兼容？

我有这个与底层元素动画相关的错误。

如果我添加 polyfill：

所以我想很遗憾我不能。但。

有没有办法填充这个功能？

我的情况不是。建议不要用于生产？ 有人知道什么时候打算全力支持动画吗？

我正在尝试安装@angular/animations。GET http://localhost:3000/@angular/animations 404 (Not Found)显然，这是自安装材料以来我得到的@angular/material 的依赖项。

我在安装它时收到此错误：

这似乎告诉我我需要 4.0.3 版的核心。但它也说我需要 4.1.2。我有 4.0.3。这是我的 npm outdated 的输出：

此外，@angular/animations 已经在我的 package.json: 中"@angular/animations": "^4.1.2",，但该文件夹不存在。

那么如何安装动画呢？即使我今天刚刚安装了最新的 angular-quickstart，我是否需要更新 Angular？是这样，怎么样？这篇关于如何对我不起作用的帖子（可能是因为我在 Windows 上？）

还是我走错了路——我现在想要的只是@angular/material 工作，这样我就可以继续我的教程了。

我正在创建一个滑动到下一个或上一个全屏页面的分页组件。因为不同浏览器和设备的问题，我暂时放弃了只使用 CSS 过渡。我有一个可行的角度动画解决方案，但新问题是它不能缩放。

如您所见，问题在于，例如，当我有 9 页时。我不想定义 9 个状态和 18 个转换。如何根据页数执行可重用状态或生成状态和转换运行时？有任何想法吗？

模板看起来像这样

如何使用 Angular 4 在图像按钮上进行图像旋转（单击：0° -> 180° / 再次单击：180° -> 0°）？

我也使用 Angular 材质。

这是我的按钮：

这个按钮将打开一个sidenav，我想对其进行动画处理以使其更加用户友好

谢谢

假设我的组件 html 中有以下内容

在控制器中：

我希望能够为（并且仅针对）用户在收到对话框响应后单击的特定 div 动态更新 [@fade_out] 状态。

如果我将 [@fade_out] 绑定到控制器中的布尔值，所有其他框将触发相同的动画，因此全部淡出。

如果我将 [@fade_out] 绑定到一个函数，我会在收到响应后不知道如何为该特定 div 触发该特定函数。

任何人都可以为我建议一种方法来完成这项工作吗？

在 4.2 版之前（目前在 RC 中），对于缩放动画，我曾经有以下代码：

现在，由于 4.2 支持输入参数（为此等了很长时间），我要这样做：

component code:

并且动画代码更改为：

但是，在动画代码中没有在状态中定义样式的情况下，动画完成后，元素（在本例中为按钮）总是跳转到它的自然大小。而且我不知道在 state() 代码块中指定输入参数的方法。

我也试过这个：

我希望它会保留动画结束时转换所具有的任何价值，但它没有完成任何事情......

我有外部路线：/posts和/about. /postsroute 有嵌套的 routes:/和/pages/:pageNumber.

在嵌套路由 (/和/pages/:pageNumber) 之间导航时，动画效果很好。但是当导航到/about嵌套路由时立即消失。

animateChild()没有帮助。在父路由组件动画中：

这会导致错误query("@*") returned zero elements.。所以嵌套路由立即被移除，父组件看不到。

角度版本：4.2.2