An example of Angular 2 animation ended callback function

Question

I am trying to create a function that will be triggered at the end of an animation in Angular 2 (I am using the latest angular cli).

I have been on the Angular Animations to gain some understanding of how this would be implemented by assigning the trigger with a callback in my example of code I have a component that is animated onto the page. the code is has follows:

//first.component.ts

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/core';


@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css'],
  host: {
    '[@routeAnimation]': 'true',
    '[style.display]': "'block'",
    '[style.position]': "'absolute'"
  },
  animations: [
    trigger('routeAnimation', [
      state('*', style({transform: 'translateX(0)', opacity: 1})),
      transition('void => *', [style({transform: 'translateX(-100%)', opacity: 0}),animate(500)]),
      transition('* => void', animate(500, style({transform: 'translateX(100%)', opacity: 0})))
    ])
  ]
})
export class FirstComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

  myFunc() {
  // call this function at the end of the animation.
 }

}

the html is simply a div

<div class="w9914420">
  <h2>
     first-component Works!
  </h2>
</div>

To be honest I am not too familiar with JavaScript so any help or a quick example would help me gain a better understanding of Angular 2.

Stefan Falk · Accepted Answer · 2018-04-18 21:01:07Z

50

This is working example:

import {Component, NgModule, Input, trigger, state, animate, transition, style, HostListener } from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector : 'toggle',
  animations: [
    trigger('toggle', [
      state('true', style({ opacity: 1; color: 'red' })),
      state('void', style({ opacity: 0; color: 'blue' })),
      transition(':enter', animate('500ms ease-in-out')),
      transition(':leave', animate('500ms ease-in-out'))
    ])
  ],
  template: `
  <div class="toggle" [@toggle]="show" 
        (@toggle.start)="animationStarted($event)"
        (@toggle.done)="animationDone($event)"
     *ngIf="show">
    <ng-content></ng-content>
  </div>`
})
export class Toggle {
  @Input() show:boolean = true;
  @HostListener('document:click')
  onClick(){
    this.show=!this.show;
  }

  animationStarted($event) {
    console.log('Start');
  }

  animationDone($event) {
    console.log('End');
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <toggle>Hey!</toggle>
    </div>
  `,
})
export class App {

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, Toggle ],
  bootstrap: [ App ]
})
export class AppModule {}

Plunker

edited Apr 18, 2018 at 21:01

Stefan Falk

25.8k62 gold badges227 silver badges422 bronze badges

answered Oct 25, 2016 at 19:01

Bazinga

11.3k7 gold badges42 silver badges66 bronze badges

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

3 Comments

W9914420 Over a year ago

Good example of this using this method with NgModule, thank you PatrickJane.

W9914420 Over a year ago

I actually created a PLUNKER (plnkr.co/edit/d1UQcN?p=preview) and implemented the callback functions and added the start and done triggers to the user/component.ts file. I noticed a strange behaviour to the User component transition. This implementation causes a slight delay when the component is transition on the stage to remove the dashboard component. Any ideas to why this might be happening? removing the callback implementation sets back things to normal?

W9914420 Over a year ago

Have a look at my plunker tell me if you find the same issue as stated in my above comment

f.khantsis · Accepted Answer · 2019-12-25 15:44:33Z

20

Now Angular2's supported (@animation.start) and (@animation.done) to tap into animation events.

For example, you can use (@routeAnimation.start)=onStart($event), (@routeAnimation.done)=onDone($event) in the first.component.html.

You can find out more at here.

Also you can see a simple example with the first.component.ts on Plunker.

Hope this help!

edited Dec 25, 2019 at 15:44

f.khantsis

3,6106 gold badges52 silver badges73 bronze badges

answered Oct 25, 2016 at 19:00

Ha Hoang

1,68413 silver badges14 bronze badges

4 Comments

W9914420 Over a year ago

So how would you define the routeAnimation onstart and done functions in first.component.ts for example?

W9914420 Over a year ago

I appreciate the example, and demonstrates how I would implement with my code

W9914420 Over a year ago

actually created a PLUNKER (plnkr.co/edit/d1UQcN?p=preview) and implemented the callback functions and added the start and done triggers to the user/component.ts file. I noticed a strange behaviour to the User component transition. This implementation causes a slight delay when the component is transition on the stage to remove the dashboard component. Any ideas to why this might be happening? removing the callback implementation sets back things to normal?

W9914420 Over a year ago

Have a look at my plunker tell me if you find the same issue as stated in my above comment

Collectives™ on Stack Overflow

An example of Angular 2 animation ended callback function

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related