使用表格 insertRow 时 CSS 转换不起作用

Question

我正在使用 javascript insertRow() 方法在表中插入一行。这很好用 - 请参阅 Plunk

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 开始，你应该使用 line-height。