问题标签 [angular-animations]

我已经浏览了 SO 和其他各种网站大约 4 个小时，试图弄清楚如何解决这个问题，但我似乎找不到任何可以让我加载页面的解决方案，除了破坏预渲染的解决方案。

建议更改：

至

这将导致页面加载，但它会破坏预渲染并且（随着时间的推移）似乎会导致网站上出现奇怪的伪影（例如，我的辅助导航菜单加载时没有样式）

我得到的错误：

我已经尝试尽可能多地更新，但即使使用最新版本的 Angular，问题也是一样的（从 4.1.2 升级到 4.3.5）。

我在 .NET Core 项目<TargetFramework>netcoreapp1.1.1</TargetFramework>中运行 Angular，关于它的教程并不多。由于我是使用 .NET Core 的 Angular 新手，因此有许多与常规 Angular 应用程序的设置略有不同的东西，让我很困惑，让我忙了一段时间，但这似乎完全超出了我的范围。

包.json

app.module.ts的相关部分：

我很想用 Angular Animations再次运行它，而不会失去prerender的能力。我希望你们能指出我正确的方向。如果您需要更多信息，请告诉我。

我"@angular/animations": "^4.3.0"在我的项目中安装了 angular，我正在尝试运行 childAnimation()。

我有两个动画，一个用于父元素，一个用于子元素。都带有 :enter 和 :leave 转换。父元素的显示取决于*ngIf="isOpen"。

:enter 对这两个元素都有效，但 :leave 在子元素上没有动画

为了做到这一点，我读到我必须使用query('@*', animateChild()). 问题是这仍然不起作用。我在这里有什么遗漏吗？我的猜测是:leave 对孩子不起作用，因为只有父母是用 *ngIf 触发的，但是我怎样才能触发孩子的:leave 转换呢？

模板：

动画：

感谢您阅读我的问题（这是我的第一个问题）。

我的最终目标是有一个开始和停止动画的按钮和一个滑块（现在是一个文本框）来调整速度。

我有启动和停止动画的工作代码

我也有部分工作代码来改变“animate()”定义中的速度，因此需要使用 AnimationBuilder。我没能把它们放在一起。更多详情如下：

当使用静态定义的动画并使用 [@animation.done]="" 时，它会传递一个可用于更改状态的 $event 变量。我用它来检查是否重复动画。

使用 AnimationPlayer.onDone() 时不带任何参数，似乎也无法访问组件变量。

我需要使用 AnimationBuilder 以便以编程方式调整动画选项，但是我无法通过将表达式值添加到我与动画工厂一起使用的模板 HTML 来触发状态更改。当我尝试将表达式值添加到我提供给 AnimationFactory 的 HTML 中时，我得到：

“错误错误：未捕获（承诺）：错误：找到合成侦听器@moveBall.done” - 我的问题：使用 AnimationBuilder、AnimationPlayer 时是否允许状态和触发器？

我的代码如下所示：

moveBall.component.html:

moveBall.component.ts：

}

从 Angular 4.3.5 迁移到 4.3.6 之后，动画的某些东西变坏了（4.3.5 一切都好）。

问题是，当应用程序启动时，登录组件被加载，并且该组件有fadeIn动画显示。升级到最新的 Angular 版本后，我的组件总是在应用程序加载后隐藏。我检查了登录组件，发现它已style="display: none";应用。

我正在使用外部 animations.ts 文件来存储我的所有动画。

动画.ts

登录组件.ts

login.component.html

最奇怪的部分是即使我[@fadeIn]从 HTML 中删除，我的组件也会被隐藏加载。只有在我删除animations: [fadeIn], fromlogin.component.ts之后，我的登录表单才会出现，只是没有任何fadeIn动画。

注意：我使用[@fadeIn]没有任何表达式。但直到 4.3.5 版本它工作得很好。

有什么建议吗？

我正在尝试从 Material.io 复制此动画：

要像点击上面示例中的第一张卡片那样导航高度很简单。只是动画高度属性。问题在于点击第二张卡片，然后将其他卡片推开。

一种解决方案是使用滚动来模拟事物被推开的效果。因此，当您单击该项目时，它既可以通过动画高度使其更高，又可以同时滚动视图。

我的问题：我似乎无法弄清楚如何使用@angular/animations. 我不能使用style({ scrollTop: 100 })，它只允许根据文档使用 CSS 属性。

我如何实现这一目标？如果出于维护原因我可以将其作为animate()动画的一部分进行（将整个动画保留在代码中的 1 个位置），那就太好了，但如果只能使用单独的方法，我想这也是可以接受的。

我有一个这样定义的过渡：

一切都按预期工作。项目向左淡出。问题是，在所有项目都被隐藏后，样式会被重置，并且它们会立即再次变得可见。就像我需要将那个 css3 属性称为animation-fill-mode: forwards.

我怎样才能做到这一点？如何保留动画的最后状态？

Plnkr https://plnkr.co/edit/te0tJ76GkhkaRxF2LI2B

最近 Angulater 添加了一个功能，通过它我们可以在进入视图时轻松实现动画。我的问题是如何在 ionic 中实现此功能？

您可以在此处找到有关路由器转换的更多信息

我的目标是在推送新页面时设置自定义转换。更准确地说，我想在 ionic 中实现最右边的设计，你可以在这里找到

I'm tryng to install Angular2-Toaster (https://github.com/Stabzs/Angular2-Toaster), in the example I successful to install npm install angular2-toaster and I can inmport it withoud errors, but how I see I need also animations so I installed with:

npm install '@angular/animations' --save

but I have errors when I import the module:

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

with: Cannot find module '@angular/platform-browser/animations'

I try also npm install and npm update -D && npm update -S.

This is my app.module.ts:

The package.json:

我需要多个 div 同时淡出。

动画已实现到 10 个不同的 div。

当动画被触发时，它工作得非常好，只是它不适用于具有相同代码的 1 个 div。

这是动画代码：

这是html部分

还有其他 10 个具有相同代码的锚...

任何人都可以帮忙吗？

我正在尝试使用 angular 4.1.2使用 3D CSS 表达式的伪状态更改表达式:enter来动画路由器转换。:leave

阅读angular.io文档，其中描述了void => *和* => voidfor:enter和:leave伪转换。

在尝试了这篇文章slide in out的转换之后，我最终可以通过设置我的组件 css 文件来让它工作（应该让作者知道）。:host {postion:relative}

这有效：

这没有：

我真的很困惑为什么会发生这种情况，我还尝试将我的:host定位设置为relative以absolute确保我没有犯 CSS 错误。

任何帮助都将是超级超级超级棒:)