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');
  }
}

如果你们有其他解决方案，请分享

.bind animationend运行其他功能

1 个答案: