Question

我有一个动画，当我点击按钮时执行。我希望每次单击此按钮时都会出现此动画。我怎样才能实现它？

  <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')行放入＆＃39; setTimeout（）＆＃39;根据需要运作：

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

每次按下按钮时重新创建相同的动画。 Angular.js

1 个答案: