title: Wait for CSS Animation to Complete
body: <p>I'm working on a directional flip with an animation. I thought that I found a solution using the below binding but it I hadn't noticed the below issues...</p>
  
  <pre><code>bind( 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
  </code></pre>
  
  <p>The problem is that if you hover left then top the animation flips diagonally or will spin - you can hover multiple part of the div quickly and it will do some crazy stuff. What I want to happen is for either the animation to complete or reset instead of immediately trying to process the next hover animation. This issue is occurring in all modern browsers ( IE Edge / 11, Chrome, Firefox. These are what I've tested it in ).</p>
  
  <p>Am I going about this the wrong way? How can I have my javascript wait for the flip animation to complete?</p>
  
  <hr>
  
  <p>Related issue is that sometimes the animation will get stuck on a left-to-right or top-to-bottom animation no matter which direction because it's not waiting to complete so it can remove the other classes.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function() {
    $('.galleryWrapper.bot .gallery-item').hover(
      function(e) {
        $(this).unbind('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd');
        $(this).removeClass('rtl');
        var w = $(this).width();
        var h = $(this).height();
        var x = (e.pageX - this.offsetLeft - (w / 2)) * (w &gt; h ? (h / w) : 1);
        var y = (e.pageY - this.offsetTop - (h / 2)) * (h &gt; w ? (w / h) : 1);
        var direction = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
  
        switch (direction) {
          case 0: // Top
            $(this).addClass('utd');
            break;
  
          case 1: // Right
            $(this).addClass('rtl');
            break;
  
          case 2: // Bottom
            $(this).addClass('dtu');
            break;
  
          case 3: // Left
            $(this).addClass('ltr');
            break;
        }
      },
  
      function(e) {
        $(this).on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
          $(this).removeClass('utd rtl dtu ltr').addClass('rtl');
        });
      }
    );
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.galleryWrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .galleryWrapper .gallery-item {
    margin: 10px;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
  }
  .galleryWrapper .gallery-item,
  .galleryWrapper .gallery-item .item .side {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
  }
  .galleryWrapper .gallery-item .item {
    position: relative;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
  }
  .galleryWrapper .gallery-item .item .side {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .galleryWrapper .gallery-item .item-front {
    z-index: 2;
    background-color: red;
  }
  .galleryWrapper .gallery-item .item-back {
    background-color: blue;
  }
  .galleryWrapper .gallery-item.ltr .item-front {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  .galleryWrapper .gallery-item.ltr .item-back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  .galleryWrapper .gallery-item.ltr:hover .item {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  .galleryWrapper .gallery-item.rtl .item-front {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  .galleryWrapper .gallery-item.rtl .item-back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  .galleryWrapper .gallery-item.rtl:hover .item {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  .galleryWrapper .gallery-item.utd .item,
  .galleryWrapper .gallery-item.dtu .item {
    transform-origin: 100% 50px;
  }
  .galleryWrapper .gallery-item.dtu .item-front {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  .galleryWrapper .gallery-item.dtu .item-back {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    transform: rotateX(180deg);
  }
  .galleryWrapper .gallery-item.dtu:hover .item {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    transform: rotateX(180deg);
  }
  .galleryWrapper .gallery-item.utd .item-front {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  .galleryWrapper .gallery-item.utd .item-back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }
  .galleryWrapper .gallery-item.utd:hover .item {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="galleryWrapper bot"&gt;
  
    &lt;div class="gallery-item"&gt;
      &lt;div class="item"&gt;
        &lt;div class="side item-front"&gt;&lt;/div&gt;
        &lt;div class="side item-back"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- class="gallery-item" --&gt;
  
    &lt;div class="gallery-item"&gt;
      &lt;div class="item"&gt;
        &lt;div class="side item-front"&gt;&lt;/div&gt;
        &lt;div class="side item-back"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- class="gallery-item" --&gt;
  
    &lt;div class="gallery-item"&gt;
      &lt;div class="item"&gt;
        &lt;div class="side item-front"&gt;&lt;/div&gt;
        &lt;div class="side item-back"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- class="gallery-item" --&gt;
  
    &lt;div class="gallery-item"&gt;
      &lt;div class="item"&gt;
        &lt;div class="side item-front"&gt;&lt;/div&gt;
        &lt;div class="side item-back"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- class="gallery-item" --&gt;
  
  &lt;/div&gt;
  &lt;!-- class="galleryWrapper" --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/nuopqfg0/1/" rel="nofollow">View on JSFiddle</a></p>
  
  <p>I'm basing this animation off of <a href="https://davidwalsh.name/css-flip" rel="nofollow">CSS Flip by David Walsh</a></p>