问题标签 [angular2-animation]

我正在尝试为我的 Angular 项目中的 div 设置动画，以便它在屏幕上移动。div 是相对定位的（因为有多个元素），但是当我应用动画时，我将其更改为固定（因为我无法从相对状态获取确切位置，也无法发送参数）。

问题是该位置恰好在过渡时间的一半处应用于动画。因此，如果我将其设置为 5 秒，则在 2.5 秒时，div 将从相对变为固定。这会导致动画随机跳跃并在 2.5 秒后从不同的位置开始动画。这是正常行为吗？

我创建了一个（基本）plunkr 来说明我的意思：

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

的HTML：

和动画：

我可以通过在动画开始时应用 position: fixed 来解决这个问题，例如：

但是，元素不会从其起始位置移动，而是从固定位置移动。

有没有办法从相对位置开始动画，然后将其动画到不同的（固定）位置，同时避免中途“跳跃”？

我正在从事一个个人项目，其中我有许多卡片，并且想垂直旋转它们多次并最终得到一张随机卡片。我正在 angular2 中重新创建我的项目，并且对如何为旋转设置动画有点迷茫。这是我目前所拥有的......

card.component.ts：

card.component.html:

spinner.component.html：

在原生 JS 中，我只是简单地 requestAnimationFrame() 并通过 JS 更改 css 和 html。但是，我不太确定如何以 Angular 方式执行此操作。

我希望能够按下按钮，卡片会在容器内旋转，卡片会在随机卡片上停止。

到目前为止，我最好的想法就是在容器中添加 5 组相同的卡片并为其设置动画。我认为这不是一个正确的方法，而且我不确定如何随机化他们停止的位置。

希望得到一些帮助！谢谢！

我正在使用版本 4.1.3 的角度动画

这是下面的代码：

现在，我想给出现有的类名而不是状态中的样式，即使用样式表中定义的类（即不是内联样式）

那可能吗？如果是这样，请帮忙。

我正在使用 dotnet SPA 模板来创建一个新的 Angular 应用程序。但是当我在 app.module.shared.ts 上添加 BrowserAnimationsModule 时出现错误：

这是我的包 json：

我基本上有模板，将最新的@angular 更新到 4.3.6 添加了 cdk、材质和动画。我似乎无法为我的问题找到参考。模板使用 webpack。

我正在制作用于显示和隐藏组件的动画。

我的 Plunker：https ://embed.plnkr.co/BxT8SKBq8JwuPP16FDu4/

单击按钮时，我希望“动画” div 消失，但事实并非如此。“动画”组件内的内容仍在显示。

难道我做错了什么？任何帮助都会很棒。先感谢您。

我正在为页面中的 :enter 和 :leave 制作动画。

在组件中：

并且这个动画在几个组件中被重用。

在这些组件中的每一个中，都有一个按钮可以转到具有相同动画的下一页。

我需要用动画为这些组件创建通用条件，以便动画只有在按下这些按钮时才起作用。可以借助某种通用服务。

每次您进入动画页面时，此动画都会起作用，而我只需要仅在单击这些按钮时动画才能起作用。

我定义的组件：

它的.html：

动画：

由于某种原因，动画仅在不在 div 内的 html 上执行。里面的内容<div class="row"></div>立即出现，文本outside of div按预期淡入。我不知道发生了什么，如何为 div 元素内的内容设置动画？

我在桌面上使用 chrome。

AngularJS 1.4 中存在一个动画功能，称为 动画锚定。

当路由到新路由时，它允许使用属性标记源页面和目标页面中的元素ng-animate-ref，并通过在过渡期间创建克隆节点来在两者之间执行计算动画。

看演示

是否可以在 Angular 2+ 中做类似的事情？

我在文档中找到的示例仅处理特定组件或 dom 元素的动画，但没有像这种克隆功能那样。

谢谢

我正在使用 jquery 以这种方式平滑滚动

这里的目标是点击，我根据某些条件调用一个函数，我使用上面的代码进行滚动，这工作正常，但我想在不使用 jquery 的情况下使用角度 5 动画来实现相同的目标。

我的功能是这样的

现在我想在不使用 jquery 的情况下实现同样的目标

经过 angular5 动画文档https://angular.io/guide/animations

我有点困惑如何动态使用 animate() 进行滚动请注意，仅滚动不涉及状态更改

编辑：即使不使用 jquery 的 Javascript 解决方案也可以。

谢谢

我的代码中有这样的东西，可以在单击按钮时创建动画。

它会自动将 ng-tns 类（如 ng-tns-c4-24）添加到代码中的许多标签中，这会影响测试脚本。

有什么办法可以禁止该类自动添加？