angular - 如何在完成之前停止动画？

Question

如果我已经用 Angular 启动了一个动画，我该如何在它结束之前停止它？

我可能需要停止动画，例如，如果我在用户点击某物时有动画。如果用户在动画结束前再次点击，我想停止并重新启动。

例如，Angular 文档有 this animation :

animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]

那么，如果动画被触发了，我该如何在它完成之前停止它呢？

Answer 1

我不确定这是否正是您所需要的，但我认为它应该非常接近它。

使用动画状态，您可以拥有一个专用于重置动画的状态。

这是我为了更好地解释自己而制作的进度条的 StackBlitz 示例:https://stackblitz.com/edit/angular-stop-anim

animations.ts

import { trigger, style, animate, transition, state } from '@angular/animations';

export const load = [
  trigger('load', [
    state('left', style({ 'width': '0px' })),
    state('right', style({ 'width': '500px' })),
    state('reset', style({ 'width': '0px' })),
    transition('left <=> right', [
      animate(5000)
    ]),
     transition('reset => *', [
      animate(5000)
    ]),
  ])
];

component.html

<button (click)="runAnimation()">Run animation</button>
<button (click)="stopAnimation()">Stop animation</button>

<div class="bar bar-div"></div>
<div [@load]="state" class="loading-bar bar-div"></div>

component.ts

import { Component } from '@angular/core';
import { load } from './animations';

@Component({
  ...
  animations: [load]
})
export class AppComponent {
  ...
  state = 'left';

  runAnimation() {
    this.state = 'left';
    this.state = 'right';
  }

  stopAnimation() {
    this.state = 'reset';
  }
}

我设置了所需状态之间的转换(此处为左-右)，但没有返回到重置状态(因此它立即停止)。

最后，当您想停止动画时，将当前状态更改为“重置”。