Подключиться к обратному вызову анимации без триггера в Angular 2

Question

У меня есть компонент, называемый header.component, и мне нужно вызвать метод, когда заканчивается анимация css.

Я видел много примеров, где вы можете использовать следующий синтаксис

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

для вызова метода onAnimationFinish (определенный в файле header.component.ts). Однако это будет работать, только если вы определили триггер в файле .ts.

Я хотел бы, чтобы мои анимации и переходы, определенные в файле .css поэтому мой вопрос:

есть ли способ определить триггер анимации, который будет связан с @keyframe анимации в заголовке. файл component.css или он на 100% обязателен , что я определяю анимацию css с помощью триггеров при использовании Angular 2?

Мой 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

Вы можете использовать событие анимации и обернуть его в собственную директиву атрибутов, используя anuglar HostListener. Он будет использоваться так:

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

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

Если это устраивает вашу потребность вам нужно более подробно на таком подходе я могу предоставить вам пример реализации позже.