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

@keyframes动画首次播放

1 个答案: