ボタンを押すたびに同じアニメーションを再作成します。 Angular.js

Question

ボタンをクリックしたときに実行されたアニメーションがあります。このボタンをクリックするたびに、このアニメーションが発生します。どうすれば達成できますか？

http://jsfiddle.net/8jmnpn2u/2/

<div id='div1'></div> 
    <br> 
    <button ng-click='show()'>show</button> 

    $scope.show= function(){ 
    document.getElementById('div1').classList.add('animate'); 
    } 


    div{ 
    display:inline-block; 
    background:yellow; 
    width:250px; 
    height: 250px; 
    transition: all linear 1s; 
    opacity:0; 
    } 

    div.animate{ 
    opacity:1; 
    } 

Answer 1

アニメーションはCSSを使用して、JavaScriptがanimateクラスを追加したときに適用されているので、あなたは再度追加、クラスを削除する可能性がフェードアウトするアニメーションを待つことをお勧めしますクラス。

あなただけの必要に応じて、その後「のsetTimeout（）」関数の内部で.add('.animate')ラインを入れて、最初の.remove('animate')にあなたの関数を改正します：

$scope.show= function(){ 
    document.getElementById('div1').classList.remove('animate'); 
    setTimeout(function(){ document.getElementById('div1').classList.add('animate'); }, 2000); 
};