问题标签 [angular-animations]

悬停链接时，我需要制作可重复的动画。

我制作了一个包含该动画的路由链接组件：

悬停链接后 - 它按预期缩放，但在达到最大尺寸时停止。如您所见，我ease-in-out在该动画中使用了。我在这里想念什么？

更新：

我为这个问题创建了一个 plunker： https ://plnkr.co/edit/e7sN2Aoz2sr68CrWxtgo?p=preview

我切换MdTabGroup到md-tab-nav-bar/md-tab-link指令，以便能够将路由分配给各个标签页。不幸的是，我在这个过程中丢失了滑入动画（指令似乎没有动画），所以我试图模仿这种行为，MdTab但到目前为止没有成功。

这是使用 tab 指令的模板：

这是路由到的模板：

动画 ( flyInOut) 本身运行良好（在不同的项目中测试），并在选择第一个选项卡时执行一次

如果我之后单击第二个选项卡，我会导航到

好的，但根本没有过渡/动画。我认为这是因为我state在组件内部只有一个，并且该组件只有一个实例，因此只有这个单一状态。

我想知道我能做些什么，我想再次为我的标签制作滑入/滑出动画。如果有任何帮助，可以在此处找到整个项目。

我有一个元素可以根据标志从左到右移动：plunker。现在我想给它添加一个动画。我试图以最明显的方式做到这一点：

它在从左到右移动时有效，但在其他方式下无效：plunker。

有什么想法可以解决这个问题吗？

我在 angular2 中使用 webpack，当我尝试运行我的应用程序时，我收到一条错误消息

找不到模块“@angular/animations”

包.json

我的 webpack.config.js 文件是

当我运行 npm start 之类的命令时，我收到如上所述的错误。

我什至尝试使用此命令安装 angular-animate

npm 安装角度动画

这是我收到的错误消息

我还尝试使用命令卸载 angular-animate

npm卸载角度动画

但这对我没有帮助。

我尝试在子模板中添加动画：

item.component.ts 中的函数 toggleAnimateState()：

在同一个组件中：

在 app.componet.html 中：

但我得到这个错误：

我一直在摆弄Angular 动画，想知道是否有最好/推荐的方法来避免内联样式......例如，

无论如何，“动画”可以使用上面的 styleUrls 和 templateUrl 之类的参考吗？我见过有人将其称为 const 但想知道是否有“Angular 官方”方式。

我尝试用 Angular 制作一个简单的动画：

但是，如果我单击按钮，它会说：

未捕获的 ReferenceError：onAnimate 未在 HTMLButtonElement.onclick 中定义（（索引）：13）

有人知道那里有什么问题吗？

编辑：按钮现在可以工作，但动画仍然失败，div 也没有出现。

我使用 angular-seed 升级了 Angular 4 项目，现在出现错误

找到合成属性@panelState。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。

我怎样才能解决这个问题？错误消息到底告诉我什么？

我一直对我可能认为是 Angular 4 中动画模块中的错误感到困惑。使用 Angular 2.x 中的动画，我制作了一个从高度 * 到固定高度的动画。这在 Angular 2 中工作得非常好。另一方面，当使用 Angular 4 时，在动画完成之前重新触发动画时，应用了动画的元素的高度会出现问题。通配符 (*) 高度似乎是导致问题的原因。这是一个可以重现该问题的演示片段。如果您在元素处于 *-height 状态时双击该元素，则会触发该错误：

我如何使用通配符值设置高度动画是否有问题，或者通配符高度的行为方式是否有问题？

我正在开发的应用程序需要能够在路线中来回导航，因此当您以一种方式在应用程序中以一个方向导航时，组件会从左到右进行动画处理，而当您向后导航时，它们会从右到左导航。

IE

我可以在 NG4 中轻松实现这一点，但问题是它不能同时导航退出和进入组件。退出的组件消失了，进入的组件开始动画化。

我也可以在 NG2 中实现这一点——但是当你有条件动画时就会出现复杂情况。IE。

这里的问题是根据下一条或上一条路线触发不同的动画。

有没有人在 NG2 或 4 中有解决方案来解决在任一方向上同时为两个视图设置动画的问题？

我没有把它放在 plunkr 中，因为我不知道如何在其中设置 NG4 应用程序。道歉。

我的 NG4 解决方案基于此演示应用程序 https://github.com/matsko/ng4-animations-preview

但基本上在我的 app.component.ts 我有以下动画：

和一个函数，它从每条路由中获取一个动画值并将其绑定（？）到出口变量<router-outlet> in app.component.html：

上面的函数获取动画中用于定义过渡开始和结束值的动画值：

app.component.html：