title: Mouse movement blocks 'transitionend'
body: <h2>Introduction</h2>
  
  <p>I'm using Semantic-UI's sidebar functionality, which gives you a button that triggers a sidebar that pushes the content from the left (in this case).</p>
  
  <p>I want to unfold that same sidebar by hovering with the mouse on the left side. I realize there are several ways to do it (as these often do. Maybe just checking the X position of the mouse would work but that's beside the point); I chose to create a transparent div on the left side and make its <code>:hover</code> pseudo-class to trigger the sidebar:</p>
  
  <pre><code>// create sidebar and attach to menu open
  $('.ui.sidebar').sidebar('attach events', '.toc.item');
  // hover transparent div to trigger the sidebar too:
  $('.sidebar-trigger').hover(function() {
      $('.ui.sidebar').sidebar('show')
  });
  // hide() and show() the sidebar accordingly to use the sidebar:
  $('.ui.sidebar').sidebar('setting', {
      onShow: function() {
          $('.sidebar-trigger').hide();
      },
      onHidden: function() {
          $('.sidebar-trigger').show();
      }
  });
  </code></pre>
  
  <h2>Problem</h2>
  
  <p>Now, it all works except for one occasion: when you don't stop moving the mouse as the sidebar opens. I've looked at <code>$(document).on('transitionend', function(event) { ... }</code> and that mouse effectively prevents the transition to finish.</p>
  
  <h2>Resources</h2>
  
  <p>I've put a blue background on my <code>.sidebar-trigger</code> and made a small video/gif so as to be clearer.</p>
  
  <p><a href="https://i.imgur.com/WExt58K.gif" rel="nofollow noreferrer"><img src="https://i.imgur.com/WExt58K.gif" alt="video/gif"></a></p>
  
  <p>I moved the mouse like a crazy creature but with natural gestures the problem occurs as well.</p>
  
  <p>I'm using Semantic-UI's guide on this thing: <a href="http://semantic-ui.com/modules/sidebar.html#/settings" rel="nofollow noreferrer">http://semantic-ui.com/modules/sidebar.html#/settings</a> (I've also tried onVisible and onHide with no luck)</p>
  
  <p>This is a <em>OSX Yosemite 10.10.3</em> running <em>Chrome 45.0.2454.101 (64-bit)</em></p>
  
  <p><a href="http://jsfiddle.net/1amus8q9/16/" rel="nofollow noreferrer">jsfiddle with the problem at hand</a></p>
  
  <p><strong>PS: It seems <a href="https://code.google.com/p/chromium/issues/detail?can=2&amp;start=0&amp;num=100&amp;q=&amp;colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&amp;groupby=&amp;sort=&amp;id=513206" rel="nofollow noreferrer">it might be an OSX Chrome bug?</a></strong></p>