終了する前にアニメーションを停止する方法は？

Question

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> 

コンポーネント.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'; 
    } 
} 

私は状態間の遷移を設定するには、（ここでは左から右）たかったが、（それは即座に停止して）バックに行くにはどれも状態をリセットしません。

最後に、アニメーションを停止したいときは、現在の状態を「リセット」に変更します。