Slideout Bug触发两次

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

（Firefox做得很好）
原因是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');
});

编辑：哦等等，这是camelCase问题。我的代码有不同的行为。