title: Changing quickly between opacities doesn't trigger transition
body: <p>Whenever you have an element with its <code>display</code> property set to <code>none</code>, and you try to <strong>trigger a transition so that it "fades in"</strong>, it jumps quickly to full opacity, unless you add a timeout. Do you have any idea of how to get around this? The timeout works, kinda, but not as well as I would like. Here's what I have:</p>
  
  <pre><code>fadeIn: function(speed) {
      var len = this.length,
          speed = speed || '1000',
          transitionString = 'opacity ' + speed + 'ms';
      while (len--) {
  
          el = this[len]; //*this* is an object containing DOM elements
  
          (function motherLoop(el, len) {
  
              setTimeout(function () {
  
                  el.style.display = 'block';
  
                  el.style.transition = transitionString;
  
                  el.style.opacity = 0;    
  
                  //timeout needed for transition to trigger...
  
                  (function babyLoop(el, len) {
                      setTimeout(function () {
                          el.style.opacity = 1;
                          if(len--) babyLoop(el, len);
                      }, 10);
                  })(el, len);
  
  
                  function transitionEnd() {
  
                      el.removeEventListener('transitionend', transitionEnd);
                      el.style.opacity = '';
                      el.style.transition = '';
  
                  }
                  el.addEventListener('transitionend', transitionEnd);
                  if(len--) motherLoop(el, len);
              }, 50);
  
          })(el, len);
      }
      return this;
  }  
  </code></pre>
  
  <p>As you can see, it is really messy code, but so far the timeout has been the only thing I find that works. This only happens if the element has its display set to none, though. And it's sometimes set to none because I have another method that hides given element. As you can see, I first set the (<em>hidden</em>) element to <code>display: block</code>, I add the CSS transition, set its <code>opacity</code> to <code>0</code> and then to <code>1</code>. It is when switching to <code>opacity: 1</code> that the timeout is crucial for the transition to trigger.
  Is there anything you can see that I'm doing wrong? </p>
  
  <p>What I'd like to do, specifically, is not rely on the timeouts, because they don't work well (the transition still doesn't trigger sometimes), and because they don't seem "natural". As a side effect, I'd like to learn why this happens, if you could help. Thank you. </p>