css - 在 Angular 2 中 Hook 到没有触发器的动画回调

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 事件。虽然这具有较差的浏览器兼容性。

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

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