我使用javascript insertRow()
方法將一行插入表中。這只是正常 - 見普拉克使用表插入時CSS轉換不起作用行
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>
任何想法?
什麼是動畫? –
是的,過渡工作在tr。只有低的高度不 – vals
@CraigMorgan相同的規則 –