.bind animationend在其他函数上运行

我试图检测何时CSS动画完成删除类，但是当我使用.bind动画结束时，即使在其他函数上也会触发。继承人的完整代码https://jsfiddle.net/mg4t9cnt/1/ 如何使它只在一个函数.bind animationend在其他函数上运行

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

来源

2017-10-15 GerryofTrivia

嗯，我找到了解决办法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'); 
    } 
}

运行，如果你们有另一种解决方案，请分享

来源

2017-10-15 19:30:57 GerryofTrivia

.bind animationend在其他函数上运行

回答

相关问题