使用表插入时CSS转换不起作用行

Question

我使用javascript insertRow()方法将一行插入表中。这只是正常 - 见普拉克

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

我的问题是，我想申请一个CSS过渡到插入。所以我认为最好的方法是添加行，应用0px的高度，插入innerHTML，然后将高度设置为50px。我已经在CSS中设置tr转换为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

如：

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开始，则应该使用行高。