Question

我们正在开发的网站上实现心愿单功能，当用户点击图标将当前项目添加到心愿单时，它会触发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;
    }

Answer 1

tl; dr：尝试应用animation-fill-mode: forwards

CSS动画完成后的正常行为是将样式重置为初始状态。我在这里看到这个过程的方式是当你移除--isLoading类时动画停止并将样式恢复到原始状态。只有在那之后，转换开始工作并且无关，因为样式已经被重置。 animation-fill-mode: forwards中的.wishlist-icn会阻止动画重置，因此转换可以逐渐运行。确保您可以将transform: scale(1)添加到.wishlist-icn或:not(.wishlist-icn--isLoading)，以便过渡知道要去哪里。并不是说我在这种特殊情况下测试了它，但它值得一试; P

Answer 2

＆＃13;

$('.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");
  });
});

＆＃13;

/**
 * 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);
}
}

＆＃13;

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

＆＃13;

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

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

CSS动画，状态更改完成动画

2 个答案: