CODEWITHSUNDEEP
cssangularanimation
user6809108
user6809108

Reputation: 3

Hook to animation callback without trigger in Angular 2

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.

Upvotes: 0

Views: 568

Answers (2)

Poul Kruijt
Poul Kruijt

Reputation: 71891

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?

Upvotes: 1

Kali
Kali

Reputation: 949

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.

Upvotes: 0

Related Questions