在Angular 2中挂钩动画回调而不触发答案

【问题标题】：Hook to animation callback without trigger in Angular 2在Angular 2中挂钩动画回调而不触发
【发布时间】：2017-04-06 03:36:06
【问题描述】：

我有一个名为 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”完成时应调用的函数。

谢谢。

【问题讨论】：

标签： css angular animation

【解决方案1】：

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

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

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

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

【讨论】：

您好 Quali，感谢您的回答。但是，我想避免使用动画结束事件。

【解决方案2】：

您可以尝试使用animationend 事件。不过这对浏览器的兼容性很差。

另一个选择是，因为您希望将动画分开，所以将它们定义在单独的打字稿文件中，然后将它们导入您需要的地方。

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

【讨论】：

嗨皮埃尔。我并没有真正掌握 Angular 2 中动画处理的窍门，但我认为触发器可能是要走的路。如您所见，我的动画示例非常简单，但我正在努力将其定义为触发器，因为它期望的信息比我在 css 文件中的动画定义中编写的信息要多得多。您能否提供一个示例，说明 @Component 看起来如何将我的 css 动画定义为触发器？然后我将按照建议导入一个存储我所有动画的组件:)
对不起。我还没有使用 angular2 的动画 :) https://angular.io/docs/ts/latest/guide/animations.html 但这是一个好的开始