@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動畫首次播放

回答

相關問題