@keyframes 动画仅第一次播放

Question

我编写了一个动画，它在后端调用成功完成时触发。现在动画第一次完美运行，但在同一页面上，如果再次调用相同的后端并且成功，那么动画也不会触发。

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;
} 

触发事件：

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>

我希望为后端调用的每个成功实例播放此动画。请帮忙！

Answer 1

无论何时进行后端调用，都应设置_this.flyToCollection= false;。这将从元素中删除类upload-to-board-icon-fly。成功完成后端调用后，您将其设置为 true。这将添加类upload-to-board-icon-fly。现在动画将开始。 希望这会有所帮助。