Переход CSS не работает при использовании таблицы insertRow

Question

Я вставляю строку в таблицу, используя метод javascript insertRow(). Это прекрасно работает - см шлепнуть

http://plnkr.co/edit/XNwQswZCrYYb8t10HgzP?p=preview

Моя проблема заключается в том, что я хочу, чтобы применить переход к CSS вставки. Поэтому я подумал, что лучший способ - добавить строку, применить высоту 0px, вставить innerHTML, а затем установить высоту 50 пикселей. Я установил tr-переход в css на transition: height 1s;

Проблема в том, что переход не работает.

CSS:

tr { 
     transition: height 1s; 
     -webkit-transition: height 1s; /* Safari */ 
    } 

JavaScript:

var opentr; 


     function showStrAdd(index) { 
      var tableRef = document.getElementById('atable').getElementsByTagName('tbody')[0]; 
      var html = "<td colspan='3'>hello world!</td>"; 

      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"; 

     }; 

HTML:

<table border="1" id="atable"> 
    <tbody> 
    <tr> 
     <td>0 r1c1</td> 
     <td>r1c2</td> 
     <td>r1c3 
      <button onclick="showStrAdd(0)">click</button> 
     </td> 
    </tr> 
    <tr> 
     <td>1 r2c1</td> 
     <td>r2c2</td> 
     <td>r2c3 
      <button onclick="showStrAdd(1)">click</button> 
     </td> 
    </tr> 
    <tr> 
     <td>2 r3c1</td> 
     <td>r3c2</td> 
     <td>r3c3 
      <button onclick="showStrAdd(2)">click</button> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Любые идеи?

Answer 1

Переходы не будут работать на tr. Итоговое содержание в div

Eg:

var html = "<td colspan='3'><div>hello world!</div></td>"; 

Тогда стиль это

div { 
    transition: height 1s; 
    -webkit-transition: height 1s; /* Safari */ 
} 

Answer 2

Проблема заключается в том, что вам необходимо установить первый свой элемент, пусть браузер рисовать, а затем установите свойство, подлежащее переходу.

Как это

 var opentr; 
     var row; 

     function showStrAdd(index) { 
      var tableRef = document.getElementById('atable').getElementsByTagName('tbody')[0]; 
      var html = "<td colspan='3'>hello world!</td>"; 

      if(opentr!==undefined){ 
       tableRef.deleteRow(opentr); 
      } 
      opentr = parseInt(index)+1; 
      row = tableRef.insertRow(opentr); 
      row.style.height = "0px"; 
      row.innerHTML=html; 
      setTimeout (setHeight, 1); 
     }; 

     function setHeight() { 
      row.style.height = "50px"; 

     } 

Обратите внимание, что изменение высоты выполняется после того, как функция выходов. Это то, что важно, а не задержка!

Он не начинается с высоты 0px, но на минимальной высоте, что позволяет отображать контент. Если вы хотите, чтобы он начинался с 0px, вместо этого вы должны использовать линейную высоту.