CSS动画、状态变化完成动画

Question

我们正在开发的网站上实现愿望 list 功能，当用户单击图标将当前元素添加到愿望 list 时，它会触发 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 类时，动画会停止并将样式恢复到原始状态。只有在那之后，过渡才开始工作，并且由于样式已经重置而没有任何作用。 .wishlist-icn 中的 animation-fill-mode:forwards 会阻止动画重置，从而使过渡能够逐渐进行。确保您可以将 transform:scale(1) 添加到 .wishlist-icn 或 :not(.wishlist-icn--isLoading) 以便过渡知道要走向何方。并不是说我在这种特殊情况下测试过它，但值得尝试；P