如何使它可以一直被點都有效果？twitter heart

Question

主要顯示

<span class="notify-cart-heart"></span>

.notify-cart-heart{
  display: none;
}

後端溝通用

$('.xxx').load('/models/notify?type=cart', function(data){
    if(data!=''){
      $('.notify-cart-heart').css('display','block').addClass('notify-cart-heart-done');
    }else{
      $('.notify-cart-heart').css('display','none');
    }
  });

css

.notify-cart-heart {
  cursor: pointer;
  height: 30px;
  width: 30px;
  background-image:url( '../../images/twitter_heart.png');
  background-position: left;
  background-repeat:no-repeat;
  background-size:2900%;
}

.notify-cart-heart-done{
  background-position:right;
}

.is_animating {
  animation: heart-burst .8s steps(28) 1;
}

@keyframes heart-burst {
  from {background-position:left;}
  to { background-position:right;}
}

點擊按鈕後觸及 event

// removeClass('is_animating notify-cart-heart-done');

$('.notify-cart-heart').addClass('is_animating notify-cart-heart-done');

../../images/twitter_heart.png

我現在的問題是
第一次點下去時，會有效果出現
但我要的是：連續點好幾次都會有效果
但現在他就會一直停在 notify-cart-heart-done 的狀態，我有試過移除 removeClass('is_animating notify-cart-heart-done') 它，但還是沒用？

Answer 1

$('.notify-cart-heart').removeClass('is_animating notify-cart-heart-done');

// 触发 reflow
$('.notify-cart-heart')[0].offsetWidth;

$('.notify-cart-heart').addClass('is_animating notify-cart-heart-done');

原理见我的另一个回答.