web-dev-qa-db-fra.com

Un exemple de Angular 2 animation terminée fonction de rappel

J'essaie de créer une fonction qui sera déclenchée à la fin d'une animation en Angular 2 (J'utilise la dernière angular cli).

J'ai été sur le Angular Animations pour comprendre comment cela serait implémenté en affectant le déclencheur avec un rappel dans mon exemple de code. J'ai un composant qui est animé sur la page. le code est le suivant:

//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.
 }

}

le html est tout simplement un div

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

Pour être honnête, je ne suis pas trop familier avec JavaScript, donc toute aide ou un exemple rapide m'aiderait à mieux comprendre Angular 2.

angularangular-ui-router
15
W9914420

Ceci est un exemple de travail:

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

33
Bazinga

Désormais pris en charge par Angular2 (@animation.start) et (@animation.done) pour accéder aux événements d'animation.

Par exemple, vous pouvez utiliser (@routeAnimation.start)=onStart($event), (@routeAnimation.done)=onDone($event) dans le premier.component.html.

Vous pouvez en savoir plus sur ici .

Vous pouvez également voir un exemple simple avec le first.component.ts sur Plunker .

J'espère que cette aide!

12
Ha Hoang