jquery - .bind animationend 在其他函数上运行

Question

我正在尝试检测 CSS 动画何时完成以删除一个类，但是当我使用 .bind 动画结束时，它甚至会在另一个函数上触发。这是完整的代码 https://jsfiddle.net/mg4t9cnt/1/如何让它只在一个函数上运行

function hide_content(){
  $('.sidebar').removeClass('sidebar-show');
  $('.sidebar').on('animationend oAnimationEnd',function(event) {
   // only run on this function
   alert('hide content');
   });
    } 
function show_content(){
    $('.single-page').addClass('hidden');
  if(!$('.sidebar').hasClass('sidebar-show')){
    $('.sidebar').removeClass('hidden').addClass('sidebar-show');
  }

}

.sidebar{
  position: absolute;
  top:0;
  right:calc(100% - 500px);
  width: 500px;
  background: green;
  animation: slideright 1s forwards;
}

.sidebar-show{
  animation: slidesleft 1s forwards;
}

Answer 1

好吧，我找到了解决方案 https://jsfiddle.net/mg4t9cnt/3/

function show_content(){
    $(".sidebar").off( "animationend oAnimationEnd" );
    $('.single-page').addClass('hidden');
  if(!$('.sidebar').hasClass('sidebar-show')){
    $('.sidebar').removeClass('hidden').addClass('sidebar-show');
  }
}

如果大家有其他解决方案，请分享