為什么我的動畫卡在循環中？

Question

我的 CSS 動畫出現了一些奇怪的行為，希望有人能提供幫助。 我基本上是使用一個選擇框來選擇應該顯示哪個<ul> 。 但是，如果用戶選擇值 A，選擇值 B，然后再次選擇 A，則動畫會陷入 A 和 B 之間的無限循環淡入淡出。

$('select#month').change(function(){
    var s = $('option:selected', this).val();

    $('#plan-wrapper ul.visible').addClass('scaleFadeOut').on('animationend', function(){
      $(this).removeClass('scaleFadeOut visible').addClass('hidden');

      $('#plan-wrapper ul#' + s).removeClass('hidden').addClass('scaleFadeIn').on('animationend', function(){
        $(this).removeClass('scaleFadeIn').addClass('visible');
      });

    });
  });

我目前在任何地方都沒有這個在線，但我很快就會建立一個臨時站點。 如果需要，我會用鏈接更新這篇文章。

編輯：正如所承諾的，這里是一個登台站點鏈接： https : //lbc.labs.nichols-co.com/vision

我現在可以停止投票嗎？ 😉

Answer 1

非常感謝 reddit 上的 /u/SirHound。 他指出我需要調用off()來刪除事件偵聽器。 這是他的答案的鏈接。