title: CSS 3 animation not executing the first time it is called
body: <p>So... I have this small webpage with two divs, a button, two css classes and a function in javascript.</p>
  
  <p>The idea is that when pressing the button, the function changes the css class of the div and hides it with a nice transition. When pressing it again, it does the opossite:</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="div1" &gt;
    &lt;div id="div2" &gt;
      Here be HTML stuffs.
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The javascript:</p>
  
  <pre><code>hideNShow(){
  
    var w = $('#div2');
    var height = w.outerHeight();    
  
    if(document.getElementById("div1").className=="hidden")
        document.getElementById("div1").className="visible";
        document.getElementById("div1").style.height=height + "px";
    } else if (document.getElementById("div1").className=="visible") {
        document.getElementById("div1").className="hidden";
        document.getElementById("div1").style.height=0 + "px";
    }
  }
  </code></pre>
  
  <p>And the CSS classes:</p>
  
  <pre><code>.visible {
    visibility: visible;
    opacity: 1;
    transition: all 1s ease; 
  }
  .hidden {
    visibility: hidden;
    opacity: 0;
    height:0;
    overflow: hidden;
    transition: all 1s ease;
  }
  </code></pre>
  
  <p>The button is just a button with the function referenced in a different div.</p>
  
  <p>My problem, right now is that if div1 has "hidden" as starting class (), it works just fine (all the transitions works as intended with the intended delay), but if the starting class is "visible", the first time I press the button, the div hides automatically, ignoring the transition.</p>
  
  <p>I've looked around and found nothing. It seems that the first </p>
  
  <p>EDIT: Fixed a typo on the code with a name for a div.</p>