transitionEndは自身、または親要素をdisplay:noneすると呼ばれない

by FiNGAHOLiC

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<button id="btn-anim">animation start</button>
<button id="btn-hide">hide box</button>
<button id="btn-show">show box</button>
<button id="btn-reset">reset</button>
<div id="box"></div>

CSS

#box{
  width:100px;
  height:100px;
  position:relative;
  top:0;
  left:0;
  z-index:1;
  background:#000;
}

.anim{
  -webkit-transform:translate3d(200px, 0, 0);
  -webkit-transition:all 5s linear;
}

JavaScript

$(function(){
    
    // 連打防止用フラグ
    var flg = false;

    // 連打防止用フラグ反転
    var invert = function(){
      flg = !flg;
    };

    // ボックス
    var $box = $('#box').on('webkitTransitionEnd', function(){
      console.log('animation done!');
      $(this).removeClass('anim');
      invert();
    });

    // アニメーションスタート
    $('#btn-anim').on('click', function(){
      if(!flg){
        invert();
        $box.addClass('anim');
      };
    });

    // 非表示
    $('#btn-hide').on('click', function(){
      $box.hide();
    });

    // 表示
    $('#btn-show').on('click', function(){
      $box.show();
    });
  
    // リセット
    $('#btn-reset').on('click', function(){
      flg = false;
      $box.removeClass('anim').show();
    });
    
});