Question

我有一个名为header.component的组件，我需要在css动画完成时调用一个方法。

我见过很多可以使用以下语法的例子

  <div class="header-div" (@anim.done)="onAnimationFinish($event)"></div>

调用onAnimationFinish方法（在header.component.ts文件中定义）。但是，这只有在您定义后才有效 .ts文件中的触发器。

我想保留.css文件中定义的动画和过渡，所以我的问题是：

有没有办法定义一个动画触发器，它将链接到header.component.css文件中的@keyframe动画，或者它是100％强制的我在使用Angular 2时用触发器定义了我的css动画？

我的css：

@keyframes anim {
0% { position:relative; width: 50px; left: 0px; }
50% { position:relative; width: 100px; left: -25px; }
100% { position:relative; width: 50px; left: 0px; } 
}

.ts文件只包含动画'anim'结束时应该调用的函数。

感谢。

Answer 1

您可以尝试使用animationend事件。这虽然浏览器兼容性很差。

另一种选择是，因为你想让你的动画分开是在一个单独的打字稿文件中定义它们，并将它们导入你需要的地方。

点击此处了解如何： Can you move your animations to an external file in Angular2?

Answer 2

您可以使用animationend事件并使用anuglar HostListener将其包装到自己的属性指令中。它将被用作：

<div class="header-div" [myAnimationEnd]="onAnimationFinish($event)"</div>

http://www.w3schools.com/jsref/event_animationend.asp

如果这符合您的需要，您需要有关该方法的更多详细信息，我可以在稍后为您提供示例实现。

在Angular 2中挂钩到没有触发器的动画回调

2 个答案: