Slideout 버그 트리거링 두 번

Question

이상한 방식으로 트리거되는 이벤트에 몇 가지 문제가 있습니다. 열려 쳤고 jsfiddle에 몇 번을 닫으면 당신은 무슨 일이 일어나고 있는지 볼 수 아래 :

http://jsfiddle.net/rzs7x4ab/5/이

$('.btn-open-wrapper').on('click', function (event) { 
    event.stopPropagation(); 
    $(".blackboard-wrapper").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function (event) { 
     $('.btn-open-wrapper').addClass('is-hidden'); 
     $('.btn-close-wrapper').addClass('is-visible'); 
    }); 
    $('.blackboard-wrapper').addClass('is-open'); 
}); 


$('.btn-close-wrapper').on('click', function (event) { 
    $('.btn-open-wrapper').removeClass('is-hidden'); 
    $('.btn-close-wrapper').removeClass('is-visible'); 

    event.stopPropagation(); 
    $(".btn-close-wrapper").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function (event) { 
     $('.blackboard-wrapper').removeClass('is-open'); 
    }); 
}); 

Answer 1

(파이어 폭스 꽤 잘 수행)
을 이유는 CamelCase를 transitionEnd (당신이 사용하지 않은 것입니다)

Fixed (test in Chrome)

Answer 2

당신은 혼합 닫기를 클릭 할 때 표현식을 수정하십시오. Here's a working JSFiddle을 코드와 비교하십시오. 예를 들어

:

$(".btn-close-wrapper").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function (event) { 
    $('.blackboard-wrapper').removeClass('is-open'); 
}); 

가 있어야한다 :

$("#blackboard-wrapper").one("transitionEnd webkitTransitionEnd oTransitionEnd MSTransitionEnd", function (event) { 
    $('#btn-open-wrapper').removeClass('is-hidden'); 
    $('#btn-close-wrapper').removeClass('is-visible'); 
}); 

편집 : 아 기다리고, 그것은 낙타 표기법의 문제입니다. 내 코드는 다른 동작을합니다.