web-dev-qa-db-de.com

Ein Beispiel für Angular 2 animationsbeendete Rückruffunktion

Ich versuche, eine Funktion zu erstellen, die am Ende einer Animation in Angular 2 (Ich verwende die neueste angular cli)) ausgelöst wird.

Ich war bei Angular Animations , um zu verstehen, wie dies implementiert werden würde, indem der Auslöser in meinem Codebeispiel mit einem Rückruf versehen wird. Ich habe eine Komponente, die auf der Seite animiert ist. Der Code lautet wie folgt:

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

}

das html ist einfach ein div

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

Um ehrlich zu sein, ich kenne mich mit JavaScript nicht so gut aus. Daher würde mir jede Hilfe oder ein kurzes Beispiel helfen, ein besseres Verständnis von Angular 2.

15
W9914420

Dies ist ein funktionierendes Beispiel:

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

Jetzt unterstützt Angular2 (@animation.start) und (@animation.done), um Animationsereignisse aufzurufen.

Zum Beispiel können Sie (@routeAnimation.start)=onStart($event), (@routeAnimation.done)=onDone($event) in der first.component.html.

Weitere Informationen finden Sie unter hier .

Sie können auch ein einfaches Beispiel mit der first.component.ts auf Plunker sehen.

Ich hoffe das hilft!

12
Ha Hoang