.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在其他函數上運行

回答

相關問題