CSS动画，状态改变完成动画答案

【问题标题】：CSS Animation, State change finish animationCSS动画，状态改变完成动画
【发布时间】：2015-07-08 10:19:25
【问题描述】：

我们正在开发的网站上实现愿望清单功能，当用户单击图标以将当前项目添加到愿望清单时，它会触发 ajax 请求。

现在，当该 ajax 请求正在执行它的业务时，我们向图标添加了一个加载类，因此它会稍微放大和缩小。我的问题是，一旦 ajax 请求完成加载，我们就会删除该类，但动画会突然停止，而不是缩小到初始大小。

我们如何才能使动画完成，而不是突然停止？

下面是我的 CSS：

/**
 * Keyframes
 */
@keyframes breathe {

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}



/**
 * Icon
 */
.wishlist-icn {
    transition: all .3s ease;
}

    .wishlist-icn--isAdded {
        fill: #4B3814;
    }

    .wishlist-icn--isLoading {
        animation: breathe 2s ease-in-out 0s infinite normal both;
    }

【问题讨论】：

标签： css ajax animation

【解决方案1】：

tl;dr：尝试申请animation-fill-mode: forwards

CSS 动画完成后的正常行为是将样式重置为初始状态。我在这里看到的过程是，当您删除 --isLoading 类时，动画会停止并将样式恢复为原始状态。只有在那之后，转换才开始工作并且没有任何事情要做，因为样式已经被重置了。 animation-fill-mode: forwards in .wishlist-icn 将阻止动画重置，因此过渡将能够逐渐运行。可以肯定的是，您可以将 transform: scale(1) 添加到 .wishlist-icn 或 :not(.wishlist-icn--isLoading)，以便过渡知道要做什么。并不是说我在这种特殊情况下测试过它，但值得一试；P

【讨论】：

【解决方案2】：

$('.start-animation').on('click', function() {
  $('.wishlist-icn').addClass('wishlist-icn--isLoading');
});



$('.stop-animation').on('click', function() {
  $(".wishlist-icn").bind("mozAnimationIteration animationiteration webkitAnimationIteration", function() {
    $(this).removeClass("wishlist-icn--isLoading");
  });
});

/**
 * Keyframes
 */

@keyframes breathe {
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
/**
 * Icon
 */

.wishlist-icn {
  position: relative;
  display: inline;
  transition: all 2s ease;
  font-size: 5em;
}
.wishlist-icn--isAdded {
  fill: #4B3814;
}
.wishlist-icn--isLoading {
  animation: breathe 2s ease-in-out 0s infinite normal both;
  animation-fill-mode: forward;
}
.wishlist-icn--isLoaded {
  transform: scale(1);
}
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wishlist-icn"> <i class="ion-heart"></i>

</div>
<button class="start-animation">start animation</button>
<button class="stop-animation">stop animation</button>

您可能必须使用 javascript 来监听动画迭代以结束然后删除类。

$(".wishlist-icn").bind( "mozAnimationIteration animationiteration webkitAnimationIteration" , function() {
      $(this).removeClass("wishlist-icn--isLoading");
});

【讨论】：