javascript - 每次按下按钮时都会重新创建相同的动画。 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 类时应用，因此您需要删除该类，可能要等待动画淡出，然后重新添加该类.

您只需首先将函数修改为 .remove('animate') ，然后将 .add('.animate') 行放在 'setTimeout 内()' 函数根据需要:

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