title: CSS transition not working when using table insertRow
body: <p>I am inserting a row into a table using the javascript <code>insertRow()</code> method. This works just fine - see Plunk</p>
  
  <p><a href="http://plnkr.co/edit/XNwQswZCrYYb8t10HgzP?p=preview" rel="nofollow">http://plnkr.co/edit/XNwQswZCrYYb8t10HgzP?p=preview</a></p>
  
  <p>My problem is that I want to apply a css transition to the insertion. So I thought the best way would be to add the row, apply a height of 0px, insert the <code>innerHTML</code> and then set the height to 50px. I have set the tr transition in the css to <code>transition: height 1s;</code></p>
  
  <p>Trouble is, the transition does not work.</p>
  
  <p>css:</p>
  
  <pre><code> tr {
          transition: height 1s;
          -webkit-transition: height 1s; /* Safari */
      }
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>var opentr;
  
  
          function showStrAdd(index) {
              var tableRef = document.getElementById('atable').getElementsByTagName('tbody')[0];
              var html = "&lt;td colspan='3'&gt;hello world!&lt;/td&gt;";
  
              if(opentr!==undefined){
                  tableRef.deleteRow(opentr);
              }
              opentr = parseInt(index)+1;
              var row = tableRef.insertRow(opentr);
              row.style.height = "0";
              row.innerHTML=html;
              row.style.height = "50px";
  
          };
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;table border="1" id="atable"&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;0 r1c1&lt;/td&gt;
          &lt;td&gt;r1c2&lt;/td&gt;
          &lt;td&gt;r1c3
              &lt;button onclick="showStrAdd(0)"&gt;click&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1 r2c1&lt;/td&gt;
          &lt;td&gt;r2c2&lt;/td&gt;
          &lt;td&gt;r2c3
              &lt;button onclick="showStrAdd(1)"&gt;click&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;2 r3c1&lt;/td&gt;
          &lt;td&gt;r3c2&lt;/td&gt;
          &lt;td&gt;r3c3
              &lt;button onclick="showStrAdd(2)"&gt;click&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Any ideas?</p>