Angular 2动画结束回调函数的示例

Question

Angular 2动画结束回调函数的示例

23

我正在尝试创建一个函数，该函数将在Angular 2中的动画结束时触发（我正在使用最新的angular cli）。

我已经参考了Angular动画以获取一些关于如何通过将触发器赋值给回调来实现的理解。在我的代码示例中，我有一个组件被动画显示在页面上。代码如下：

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

}

这个 HTML 只是一个 div。

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

说实话，我对JavaScript不是太熟悉，所以任何帮助或快速示例都会帮助我更好地理解Angular 2。

- W9914420

2个回答

20

现在 Angular2 支持 (@animation.start) 和 (@animation.done) 用于调用动画事件。

例如，您可以在 first.component.html 中使用 (@routeAnimation.start)=onStart($event)，(@routeAnimation.done)=onDone($event)。

您可以在这里了解更多信息。

此外，在Plunker上可以看到一个关于 first.component.ts 的简单示例。

希望这能有所帮助！

- Ha Hoang

那么，例如在first.component.ts中，你会如何定义routeAnimation的onstart和done函数呢？ - W9914420

我很感谢这个例子，它展示了我如何在我的代码中实现。 - W9914420

实际上，我创建了一个 PLUNKER（https://plnkr.co/edit/d1UQcN?p=preview），并实现了回调函数，并将 start 和 done 触发器添加到了 user/component.ts 文件中。我注意到用户组件转换时出现了奇怪的行为。这个实现会在组件转移到移除仪表板组件的舞台时造成轻微的延迟。有没有想法为什么会发生这种情况？移除回调实现会使事情恢复正常吗？ - W9914420

看一下我的 plunker，告诉我你是否发现了与我上面评论中所述的相同问题。 - W9914420

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bazinga · Accepted Answer

这是一个工作示例：

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