问题标签 [angular-animations]

我有一个通过 Observable 绑定到数组的项目列表。我的应用程序有一个动作效果，其中列表中的这些项目之一获得了属性更改，从而导致它被重新排序到数组的末尾（目前在数组上使用完整的 .sort() 代码实现）。

我想要的是能够通过从位置 X 移动到位置 Y 来真正使它看起来像视觉列表中的项目从它的起始位置（在数组中）到它的新位置（在列表的末尾） .

Angular动画可以做到这一点吗？我非常愿意停止使用 Array.sort() 而只是通过 splice() 调用以编程方式移动项目。

我正在尝试在 --prod 模式下构建我的 Angular 4.3 应用程序，但出现以下错误（正常构建工作正常）：

这就是我的 admin.component.ts 的样子：

和我的动画代码：

经过几次测试，我注意到只有在使用以下动画代码时才会出现错误：

知道有什么问题吗？

我有

当我显示表单时，动画效果很好。一旦我单击取消，页面就会重新加载。

如果我完全删除动画取消不会重新加载页面。

有谁知道为什么会这样？

使用此代码动画展开折叠，展开折叠工作正常，但使用角度动画框架 4.3.1 在高度上没有动画

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

为此创建了一个小演示

我想在 Angular 中的组件内制作 svg 动画，但我发现很难在动画中指定步骤。

我想为以下步骤设置动画：

1) 圆圈以不透明度 0 开始离屏

2) 圆圈从顶部移动到屏幕上，随着它的移动变得更加不透明，以不透明度 1 结束

3) 圆圈向右移动，在屏幕外结束

我什至无法让它在屏幕外开始，但我似乎也无法控制动画何时触发。我希望它在页面加载后触发 1s。

HTML：

TS：

我的开发环境是标准的 angular-cli 构建，在 app.module.ts 中添加了以下内容：

并在 app.module.ts 的 @NgModule 中：

我正在尝试使用导入BrowserAnimationsModule行为我的 angular 4 项目导入如下

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

我已经使用命令在项目文件夹中添加了动画模块

npm install --save @angular/animations

但是当我看到node_modules文件夹，然后是platform-browser文件夹时，我没有看到任何animations文件夹，我猜这就是我收到错误的原因BrowserAnimationsModule。

那么我可以知道如何BrowserAnimationsModule在我的情况下导入吗？

我在执行 ng serve 时遇到的错误

我有两个路由组件和它们的容器，我设置了一个动画触发器，我在@slide其中查询每个组件并相应地制作动画。

这可行，除了第二个动画在触发之前等待第一个动画完成，而我正在寻找的是一种让它们并行触发的方法。想法？

我正在尝试将我的 webapp 从 AngularJS 移植到 Angular 4，但我遇到了一些动画问题。对于“Google 图片”类型的视图，我有两个动画需要在单击项目时同时发生；一个 div 需要增加其底部边距，并且该 div 的一个子项需要逐渐出现，使用 ngIf 并在其高度上进行转换。两个动画分别工作，但如果我将两个动画放在各自的元素上，则只有第一个有效。

我做了一个最小的 plunker 来证明我的意思：https ://plnkr.co/edit/27EFz3h16icnh3qDzQbY?p=preview

如果您单击该按钮，应该会发生的情况是新内容在“这里的东西”和“其他东西”之间展开。实际发生的是，两个框架按预期相互远离，但新内容立即弹出。如果我从第一个 div 中删除 [@expand] 动画，新内容确实会逐渐从无到有，但显然两个容器 div 并没有为它腾出空间。

有什么技巧可以让这些动画同时工作吗？

这可以很好地将新行引入我的ngFor结构中，但:leave不会发生转换，或者它会立即发生。少了什么东西？

动画在组件模板中的应用方式如下：

我正在组件内部的元素上制作动画，因为它根本不适用于组件，而动画在父级中。

还值得一提的ngFor是，它使用的是可观察的。我想知道这是否不是一个因素，重新创建可观察对象或其他会杀死原始数组的东西。

I'm trying to apply angular 4 animation to list of html elements like

one by one with below code:

When I put this trigger to list elements, all the elements come one the screen all in one go. I want to make them appear one by one. like fetch text 1 and then text 2 on html. How can I do that?