angular - Angular 2 アニメーションの再生を強制する方法

Question

入力が更新されるたびに、DOM 要素の同じアニメーションを再度有効にしようとしています。

アニメーションは css クラスに割り当てられた css キーフレームとして定義されており、私が現在使用しているトリガーは、その css クラスを削除してから再割り当てすることであり、ブラウザーがそれを処理してレンダリングできるようにするためにわずかな遅延があります。新しいものを受け取る前に変更してください。これはせいぜい面倒で、エラーが発生しやすいように思えます。

私の理解では、Angular 2アニメーションとは正確には異なります。実際には異なる状態やそれらの間の遷移はなく、何度も何度も再アクティブ化したいアニメーションです。

「onComplete」などを公開しているため、必要なものをサポートしているように見えるこの記事に遭遇しましたが、最新のAngular RCに従って廃止されていることが判明しました。

何か不足していますか？ハードコーディングされた時間値にそれほど厳密に依存しないように、独自の「アニメーション」API を作成せずにエレガントに行う方法はありますか? また、可能であれば、パフォーマンス面でコストがかかりすぎないようにしたいと思います。

ご意見をお寄せいただければ幸いです。

これが、Plunkrでの現在のダミー実装です。

<!-- language: lang-html-->
<div #newBall class="ball ball-in"></div>

<!-- language: typescript -->
import {Component, ViewChild} from 'angular2/core';

@Component({
  // Declare the tag name in index.html to where the component attaches
  selector: 'hello-world',

  // Location of the template for this component
  templateUrl: 'src/hello_world.html'
})
export class HelloWorld {

@ViewChild('newBall') newBall: ElementRef;

constructor(){
//emulate @input changed externally
     setInterval((i) => {
            this.reActivateAnimation(this.newBall, 'ball-in'); 
        }, 1000);
   }

/**
 @fn    private reActivateAnimation(viewChild: ElementRef, className: string, timeout: number = 30): void    
 @brief Force animation to replay, by removing and then adding (after a slight delay) a given CSS class-name.
 @param {ElementRef}    viewChild   The view child to animate.
 @param {string}    className       Name of the animation class.
 @param {number}    timeout         (Optional) the timeout
(to enable the browser to recieve the DOM manipulation and apply it before the next change).
 */
private reActivateAnimation(viewChild: ElementRef, className: string, timeout: number = 30): void {
    viewChild.nativeElement.classList.remove(className);
    setTimeout(x => {
        viewChild.nativeElement.classList.add(className);
    }, timeout);
}
}

<!-- language: css -->
 .ball-in {
    animation: ball-in 0.5s forwards;
}

@keyframes ball-in {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}





.ball {
    width: 5.5rem;
    height: 5.5rem;
    margin-top:50vh;
    margin-lefrt:50vw;
    background-size: contain;
    background-color:red;
    background-repeat: no-repeat;
    color: #fff;
    border-radius:50%;

}