@keyframes动画只能在第一时间播放 [英] @keyframes animation plays for the first time only

问题描述

我写了一个动画，在成功完成后端调用时被解雇。现在，动画首次完美无瑕地工作，但在同一页面上，如果再次进行相同的后端调用并且成功，则动画也不会触发。

I've written an animation which is fired on successful completion of a backend call. Now the animation works flawlessly for the first time, but on the same page if the same backend call is made again and it's successful, then also the animation won't fire.

CSS：

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

触发事件：

Trigger Event:

if (data.p_err_code === 'success') {
      _this.flyToCollection= true;
  }

HTML：

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>

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

I want this animation to play for every successful instance of the backend call. Please help!

推荐答案

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

Whenever you make the backend call, you should set the _this.flyToCollection= false;. This will remove the class upload-to-board-icon-fly from the element. And on successful completion of the backend call, you are setting it to true. This will add the class upload-to-board-icon-fly. Now the animation will start. Hope this helps.

这篇关于@keyframes动画只能在第一时间播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！