@keyframes animation plays for the first time only

问题

I've written an animation which is fired on successful completion of a backend call. Now the animation works flawlessly for the first time, but on the same page if the same backend call is made again and it's successful, then also the animation won't fire.

CSS:

.upload-to-board-icon-fly {
    position: relative;
    animation-name: flytoboard;
    -webkit-animation: flytoboard 1s ease-in-out 1;
    -moz-animation: flytoboard 1s ease-in-out 1;
    -ms-animation: flytoboard 1s ease-in-out 1;
    -o-animation: flytoboard 1s ease-in-out 1;
    animation: flytoboard 1s ease-in-out 1;
} 

Trigger Event:

if (data.p_err_code === 'success') {
      _this.flyToCollection= true;
  }

HTML:

<li class= "show-collections-icon" ng-mouseenter="dvm.fetchLastUsedBoards()">
                <span class="icon-md icon upload-to-board-ico" ng-class= "{'upload-to-board-icon-fly': dvm.flyToCollection, 'upload-to-board-ico-active' : dvm.documentsSelected.length}" ></span>

I want this animation to play for every successful instance of the backend call. Please help!

回答1:

Whenever you make the backend call, you should set the _this.flyToCollection= false;. This will remove the class upload-to-board-icon-fly from the element. And on successful completion of the backend call, you are setting it to true. This will add the class upload-to-board-icon-fly. Now the animation will start. Hope this helps.

来源：https://stackoverflow.com/questions/35692926/keyframes-animation-plays-for-the-first-time-only