title: Adding class to transition element triggers too soon
body: <p>I'm trying to animate some elements on my page. One of the properties I need to animate is <code>bottom</code>, however, I also need to be able to reposition the element without it animating, that's why I added a seperate class to it: <code>.anim</code></p>
  
  <pre><code>.slideshow_footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      color: #fff
  }
  .slideshow_footer.anim {
      -webkit-transition:bottom 0.3s ease-out;
      -moz-transition:bottom 0.3s ease-out;
      -o-transition:bottom 0.3s ease-out;
      -ms-transition:bottom 0.3s ease-out;
      transition:bottom 0.3s ease-out;
  }
  </code></pre>
  
  <p>In my Javascript, I do the following:</p>
  
  <pre><code>var footer = $('#footer');
  // do some magic with the footer
  // ...
  // ...
  setCss(footer, 'bottom', -100); // position it so it's hidden, this should be immediate
  addClass(footer, 'anim'); // add the animation class
  setCss(footer, 'bottom', ); // animate the footer sliding in
  </code></pre>
  
  <p><em>Note that I'm not using jQuery or anything, it's an inhouse javascript framework.</em></p>
  
  <p>I have found a workaround that solves the problem, but it's extremely ugly:</p>
  
  <pre><code>var footer = $('#footer');
  // do some magic with the footer
  // ...
  // ...
  setCss(footer, 'bottom', -100); // position it so it's hidden, this should be immediate
  addClass(footer, 'anim'); // add the animation class
  setTimeout(function() {
      setCss(footer, 'bottom', ); // animate the footer sliding in
  }, 0); // even no timeout works...
  </code></pre>
  
  <p>Can anyone explain to me what is happening and how this should best be solved? Possibly changing the addClass and setCss functions? </p>