title: Twitter bootstrap: modal fade
body: <p>I have a problem with the twitter bootstrap modal...</p>
  
  <p>It works fine when I don't have the <code>.fade</code> class on my element. As soon as I add it, the modal does not show up.</p>
  
  <p>I tracked down the problem to this line, I think:</p>
  
  <pre><code>doAnimate ?
    this.$backdrop.one(transitionEnd, callback) :
    callback()
  </code></pre>
  
  <p><code>doAnimate</code> is <code>webkitTransitionEnd</code>, it looks fine.
  But I think <code>transitionEnd</code> is never fired, because I try to log something in the callback, and it never gets logged.</p>
  
  <p>Any ideas?</p>
  
  <hr>
  
  <p>EDIT: some code</p>
  
  <p>The link:</p>
  
  <pre><code>&lt;a href="/events/2-fefewfewfe/rsvps" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true"&gt;I'm attending!&lt;span class="ico join"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The modal (works without the fade class, doesn't when I add it)</p>
  
  <pre><code>&lt;div id="event-modal" class="modal hide fade"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>.modal.fade {
      -webkit-transition: opacity .3s linear, top .3s ease-out;
      -moz-transition: opacity .3s linear, top .3s ease-out;
      -ms-transition: opacity .3s linear, top .3s ease-out;
      -o-transition: opacity .3s linear, top .3s ease-out;
      transition: opacity .3s linear, top .3s ease-out;
      top: -25%;
  }
  </code></pre>
  
  <p>Am I missing something?</p>