Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

An example of Angular 2 animation ended callback function

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.

like image 297
W9914420 Avatar asked Oct 25 '16 18:10

W9914420


People also ask

Which of the following are valid easing functions in Angular animations?

The easing value controls how the animation accelerates and decelerates during its runtime. Value is one of ease , ease-in , ease-out , ease-in-out , or a cubic-bezier() function call. If not supplied, no easing is applied.

Which animation strategy would you use to apply multiple styles for a transition?

The keyframes() function in Angular allows you to specify multiple interim styles within a single transition, with an optional offset to define the point in the animation where each style change should occur.

Which animation strategy would you use if there were multiple animations that had to occur at the same time?

To create a staggered animation, use multiple Animation objects. One AnimationController controls all of the Animation s. Each Animation object specifies the animation during an Interval .


2 Answers

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

like image 149
Bazinga Avatar answered Sep 18 '22 16:09

Bazinga


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!

like image 25
Ha Hoang Avatar answered Sep 19 '22 16:09

Ha Hoang