问题标签 [angular2-animation]

在官方教程的帮助下，我在@angular/animations中迈出了第一步。我添加了必需的库并创建了我的第一个动画。我已经知道什么是过渡和状态。我可以创建简单的动画（改变背景颜色和改变元素的大小。

我在我的项目中使用@angular/flex-layout库来创建整洁的页面布局。问题来了：如何为我的 flex 布局增加和减少元素的宽度设置动画？例如：

我的页面上有 3 个“列”：

1. 在第一种状态下，它们的宽度是：容器的 38%、52%、10%
2. 在第二种状态下，它们的宽度是：50%, 25%, 25%

就像图片中一样（这些是其他州的相同列）

问题：我应该如何进行转换以动画改变列的宽度？我可以使用哪些方法和属性？应该是什么样的代码？

=====

@编辑：

我发布了我的 HTML 代码片段以显示我想要更改的属性 ( fxFlex )

app.component.html

对于app.component.ts

我知道我可以以简单的方式更改 div 的样式。但我不想改变风格。我想更改元素的 fxFlex 属性。

任何人都可以帮助我吗？可能吗？？

我想按类为元素设置动画。

例如，对于每个 div 或任何按钮，我必须同时触发我想要为特定元素设置动画的动画 - 目标而不是所有目标元素。

我得到了这个结果，但我不想要那个。

我想要这样的东西。

我的代码：

home.component.ts

home.component.html

home.component.css

我有一个简单的下拉组件，我想制作动画。问题是，尽管控制动画状态的变量以值“inactive”开始，并且当组件加载时我的下拉菜单仍然出现，并且只有在我将鼠标悬停在它上面时才会采用正确的值。我无法在样式文件中放置零高度和填充，因为我在动画中使用带有“*”的基值引用。而且我已经尝试在我的 ngOnInit 方法中使用 ChangeDetectorRef。

我正在使用 Angular 4 Animations 在按钮上测试一个简单的淡入/淡出动画。我遇到的问题是，因为我使用的是布尔值，所以没有任何东西被触发。从开发工具看来.ng-animating，元素中添加了一个类，但没有任何改变。

这是我拥有的代码示例：

我知道上面的代码曾经与 Angular 2 一起工作，但是在这种情况下它不起作用。我发现的唯一解决方案是使用 astring而不是boolean.

从上面的代码中你会注意到动画触发器@test正在读取一个字符串 ( isActive.toString()) 并且transition函数已经true <=> false通过而不是0 <=> 1.

虽然我让它工作了，但我不确定动画模块本身是否有任何更新。有人知道 Angular 4 更新对动画模块的任何更改吗？

我知道(@myTrigger.done)事件，但即使动画被中断且未完成，它也会每次都会触发。

我想为一个弹出组件创建一系列动画，其中弹出窗口从窗口右侧滑动，然后弹出关闭按钮。弹出窗口也可以Esc按键关闭。

我正在使用@myTrigger.done触发事件来检查动画是否完成。但是，如果我Esc在弹出窗口滑动时按下键，它会发出 done 事件，它会发出slideIn动画的 done 事件，即使幻灯片动画未完成，也会弹出关闭按钮。

这是我的弹出窗口的 plunker 演示。您可以看到，当它打开时，如果我单击背景或Esc按键，则会弹出关闭按钮，如果滑动动画被中断，则不应弹出该按钮。

那么有什么方法可以检查动画是否完成或中断？

我正面临 angular2 动画的问题。应用程序有一个引导系统，用户从第 1 步导航到第 2 步，依此类推。现在我在路由上有动画，其中我的第一个组件向左滑动，第二个组件从右侧滑动，这对于每个步骤都是相同的，这个流程工作得很好但是当用户回到上一步时我想反转它然后我想要那个当前组件应向右滑动，前一个组件应从左侧滑入。

动画.ts

路由导入 {Component, HostBinding} from '@angular/core' 时动画的组件；

提前致谢。

我正在尝试创建将在单击按钮时启动动画的主题，当最后一个动画尚未完成时，我不会让用户能够调用它。

我的问题是，它不仅会阻止新动画的启动，还会在没有动画运行时产生延迟。

我招致：

使用@angular/animations 4.0.2 调用第二个动画后，而先前的动画仍在进行中。如果我让第一个动画完成，则不会发生上述错误。我应该如何调试这个？

这在@angular 2.0 中工作。

编辑：这似乎是这个问题https://github.com/angular/angular/issues/16470

我正在尝试为 X 和 Y 方向上的按钮设置动画，通过 4 步使用不同的时间配置和组动画，但发现只有最后两个动画有效！它忽略了前 2 个动画。为什么会这样？我做错了什么？谢谢！

组件代码：

ts代码：

所以我正在尝试应用一些漂亮的动画，它们工作得很好，但不是很多，因为它们会破坏布局。

问题是我需要position: absolute在动画时使用，以便我可以使用transform，如下所示：

用法：

虽然这可行，但它会在动画完成时破坏元素高度，因为组件不再是页面流的一部分。

相反，我想做的是像上面那样制作动画，但是当动画完成后，我想删除该position: absolute位。

我以为我可以通过position: absolute从voidand*样式对象中删除来实现这一点，但这只会导致动画完全中断。

是否有可能实现我想要的，如果是，我将如何去做？