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。

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

2 个答案: