问题标签 [angular2-animation]

我有一个表格行，在您单击其上方行上的“查看详细信息”按钮之前，该行不可见。目前我正在使用 *ngIf 来显示第二行并在单击“查看详细信息”按钮时更改绑定对象的布尔属性。我已经阅读了 angular2 文档上的动画页面，并尝试实现“折叠/展开”动画，以便当第二个表格行变得可见时，它的动画从 0px 高度 -> 完全展开的行的高度 (*px)。

我看到的最接近我想做的例子是这个动画，它将英雄从它的高度 (*px) 移除到 0px，并且它顺利地折叠/向上滑动。

我不能让它适用于我上面描述的情况。我尝试将它与 *ngIf 结合使用，但没有奏效。（该行就像添加动画之前一样立即打开/关闭。）我尝试摆脱 *ngIf 并绑定到 [hidden] 属性，但没有成功。我还尝试删除 *ngIf 和 [hidden] 并仅播放动画，但这也不起作用（该行只是保持打开状态而从未关闭。）

我的第二个表格行 HTML 看起来像：

我的动画看起来像：

可见性变量是组件中的一个字符串，当单击查看详细信息按钮时，它会从“隐藏”变为“显示”，反之亦然。

我想用 angular 2 动画来完成什么？

我正在寻找在我的 Angular 2 RC-6 应用程序中实现漂亮页面滑动动画的可能性。我以这篇文章为例 https://www.bennadel.com/blog/3139-experimenting-with-conditional-enter-leave-animations-in-angular-2-rc-6.htm 但它实现了内部过渡变化。我需要为路由器组件制作它，也就是应用程序页面。

接下来是我的动画设置：

我有两个过渡 - 下一个和返回。要定义转换，我将变量放在模板中

并将私有变量添加到组件类。我决定使用 EventEmitter 来发出新的状态

在一些内部组件上，我有指向下一页的链接，即由goNext()函数启动：

我使用 setTimeout 延迟来确定，该根组件将拦截消息并将其方向状态切换为 'next' ，但它的值不适用于动画。同样的拦截器在下一页，所以在这个页面方向状态也应该切换到'next'。

我现在拥有的。方向值正在改变，但没有出现动画（我在组件构造函数中定义了方向 ='none'）

请告诉我，我做错了什么，如何对当前页面和下一页应用（发送）方向更改，或者是否有其他方法可以检测每个页面上的路由更改？

切换状态方法

但是，如果我删除 *ngIfng2-animation将起作用。

从理论上讲，ngIf 检查它是否为真。该元素将在 DOM 上可用。根据我的理解，该元素也应该具有非活动状态，因为它没有被触发。单击触发器后，该元素将可用并处于活动状态。

但为什么它没有任何动画？

是否有任何解决方法可以让我使用 ngIf 和动画？

我想从 html 传递组件动画的延迟，例如：

html:

ts：

但是，当我这样做时，会出现此错误：

（SystemJS）无法读取未定义的属性“延迟”（...）

如何在不导致此错误的情况下将延迟传递给 html 中的组件？

我正在尝试在一行文本上应用淡入淡出动画。我想保持它定期执行（例如文本闪烁）。我正在使用 Observable 进行状态触发。

这是我的动画数组：

我正在使用的变量：

可观察的：

这是HTML：

它正在部分工作。如果我将标题的初始值设置为“不可见”，则只有淡入效果起作用，反之亦然。

间隔处理似乎有问题。（我想知道这是否可以在没有 Observable 的情况下完成）

我尝试过使用 Angular 2 核心动画和普通的 CSS 动画。两者都给我同样的效果。

如何使用 angular2 动画显示 X 秒的标签？理想情况下，我想saved!在我的输入框旁边显示一个标签，该标签会淡入并停留 2 秒，然后淡出。我可以很容易地让动画淡出它，但我怎样才能让它淡出呢？

这是我的动画：

我正在尝试触发绑定到布尔属性的转换，但这似乎没有触发。

这是我的动画触发器的精简版

HTML：

去测试：

当发生someProperty变化时，触发器永远不会发生。

作为快速测试，我将触发器更改为使用字符串并且它可以工作

去测试：

第二个例子工作得很好

我的问题是

1. 是否支持布尔值作为触发器？
2. 如果是＃1，我做错了什么？

@Component注解为我们提供了一个属性animations。这可以用来定义一个triggers包含很多state和transition属性的列表。

当您向一个组件添加多个动画时，此列表可能会变得很长。此外，一些动画也可以很好地用于其他组件。必须将它们直接放在每个组件中似乎很乏味并且是重复的——而且它违反了 DRY 原则。

您也可以在组件上定义模板和样式属性，但在这里您可以选择提供templateUrlandstyleUrls来代替。我似乎找不到animationUrls房产 - 我错过了什么 - 有没有办法做到这一点？

我想创建一个类似轮播的元素，单击下一个用户在验证当前输入后导航到下一个问题，单击上一个相同。在最后一个问题中，提交表单并显示输出。

动画必须是缓入/缓出类型。每个问题从右侧缓入，单击下一个问题，当前问题从左侧缓入，同时下一个问题从右侧缓入。问题在数组中。

编辑：

HTML：

动画：

导航代码：

假设我们有： <li *ngFor="let item of items" [@myTrigger]='state' (@myTrigger.start)="animStart($event)" (@myTrigger.done)="animDone($event)">{{ item }}</li>

和方法animDone：

在我看来{{ animDetails }}

奇怪的是，当 console.log('Ended!') 适当地触发时， animDetails 却没有。

第一个动画，什么都没有改变。第二个动画（通过单击按钮启动）“我完成了！” 在开始时立即触发，而不是 .done。