title: JS/CSS to fade out and disable a block, then enable and fade in another, is fading out but popping in
body: <p>I've set up the <a href="https://jsfiddle.net/z5vjs3oa/" rel="nofollow noreferrer">scenario in jsFiddle</a>. My solution almost works, but it only fades out the old block, popping in the new one instead of fading in.</p>
  
  <p>I've avoided the usual pitfall of trying to animate <code>display: none;</code> by transitioning the opacity first, detecting its completion, and only then setting <code>display: none;</code>. It works a charm for the fading out...</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
    &lt;p&gt;
      Mouse over to translate:
    &lt;/p&gt;
    &lt;blockquote class="untranslated"&gt;
      &lt;p&gt;Mae govannen&lt;/p&gt;
    &lt;/blockquote&gt;
    &lt;blockquote class="translated disabled fade"&gt;
      &lt;p&gt;Well met&lt;/p&gt;
    &lt;/blockquote&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.disabled {
    display: none;
  }
  
  .fade {
    opacity: 0 !important;
  }
  
  .untranslated,
  .translated {
    opacity: 1;
    transition: opacity 0.25s;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(function($) {
  
    function whichTransitionEvent() {
      var t;
      var el = document.createElement('fakeelement');
      var transitions = {
        'transition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'MozTransition': 'transitionend',
        'WebkitTransition': 'webkitTransitionEnd'
      }
  
      for (t in transitions) {
        if (el.style[t] !== undefined) {
          return transitions[t];
        }
      }
    }
  
    var transitionEnd = whichTransitionEvent();
    var untranslated = $('.untranslated');
    var translated = $('.translated');
  
    untranslated.bind(transitionEnd, untranslatedFaded);
    translated.bind(transitionEnd, translatedFaded);
  
    untranslated.mouseenter(
      function() {
        $(this).addClass('fade')
      }
    )
  
    translated.mouseleave(
      function() {
        $(this).addClass('fade')
      }
    )
  
    function untranslatedFaded() {
      untranslated.addClass('disabled'),
        translated.removeClass('disabled'),
        translated.removeClass('fade')
    }
  
    function translatedFaded() {
      translated.addClass('disabled'),
        untranslated.removeClass('disabled'),
        untranslated.removeClass('fade')
    }
  
  });
  </code></pre>
  
  <p>Any ideas for getting it to fade in properly? Preferably without greatly changing the approach.</p>