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';
  }
}

我设置了所需状态之间的转换（此处为左右），但没有设置为返回 reset 状态（因此它会立即停止）。

最后，当你想停止动画时，你将当前状态改为＆＃39; reset＆＃39;。

如何在动画结束前停止动画？

1 个答案: