@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。现在动画将开始。 希望这有助于。