Hook to animation callback without trigger in Angular 2

Question

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.

Community · Accepted Answer · 2017-05-23 11:46:48Z

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?

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Nov 22, 2016 at 13:14

Poul Kruijt

72.3k12 gold badges153 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user6809108 Over a year ago

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 :)

Poul Kruijt Over a year ago

I'm sorry. I have not yet used the animations from angular2 :) https://angular.io/docs/ts/latest/guide/animations.html but this is a good start

Kali · Accepted Answer · 2016-11-22 13:08:11Z

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.

answered Nov 22, 2016 at 13:08

Kali

9591 gold badge8 silver badges18 bronze badges

1 Comment

user6809108 Over a year ago

Hi Quali, thanks for your answer. However, I would like to avoid using animationend event.

Collectives™ on Stack Overflow

Hook to animation callback without trigger in Angular 2

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related