@keyframes动画首次播放

我写了一个动画，成功完成后端调用时触发。现在动画第一次完美无瑕，但在同一页面上，如果再次进行相同的后端调用并且成功，那么动画也不会触发。@keyframes动画首次播放

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>

我想这个动画为后端调用的每一个成功的实例玩。请帮忙！

来源

2016-02-29 Ashish Dwivedi

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

来源

2016-02-29 06:45:24 ShwethaU

是的，即使我只是想通了。在第一个成功的例子之后，这个类没有被删除。无论如何，谢谢你的意见，它确实有帮助。 –

@keyframes动画首次播放

回答

相关问题