0

I have a component called header.component and I need to call a method when a css animation finishes.

I have seen a lot of examples where you can use the following syntax

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

to call method onAnimationFinish (defined in the header.component.ts file). However, this will only work if you have defined a trigger in the .ts file.

I would like to keep my animations and transitions defined in the .css file so my question is:

is there any way to define an animation trigger that will be linked to a @keyframe animation in the header.component.css file or is it 100% compulsory that I define my css animations with triggers when using Angular 2?

My css:

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

The .ts file only contains the function that should be called when animation 'anim' finishes.

Thanks.

Kim Kern
  • 54,283
  • 17
  • 197
  • 195
user6809108
  • 3
  • 1

2 Answers2

1

You can try using the animationend event. This has poor browser compatibility though.

Another option would be, because you would like to keep your animations separate is to define these in a separate typescript file, and import them where you need them.

Check here to see how to: Can you move your animations to an external file in Angular2?

Community
  • 1
  • 1
Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149
  • Hi Pierre. I'm not really getting the hang of animation handling in Angular 2 but I see triggers are probably the way to go. As you can see, my animation example is quite simple but I'm struggling to define it as a trigger since it's expecting way more info than I wrote in the animation definition in the css file. Could you provide an example of how would @Component look like defining my css animation as a trigger? I will then import a component storing all of my animations as suggested :) – user6809108 Nov 22 '16 at 13:29
  • I'm sorry. I have not yet used the animations from angular2 :) [https://angular.io/docs/ts/latest/guide/animations.html](https://angular.io/docs/ts/latest/guide/animations.html) but this is a good start – Poul Kruijt Nov 22 '16 at 13:37
0

You can use the animationend event and wrap it up into a own attribute directive using anuglar HostListener. It would be used like that:

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

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

If this suits your need you need more detail on that approach i can provide you a example implementation later.

Kali
  • 811
  • 1
  • 8
  • 17