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

我使用javascript

insertRow（）

方法将一行插入表中。这很好用-参见Plunk

我的问题是我想对插入应用css转换。所以我认为最好的方法是添加行，应用0px的高度，插入

innerHTML

，然后将高度设置为50px。我已经将css中的tr转换设置为

转换：高度1s

问题是，这种过渡不起作用

css:

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

        };

var-opentr；
函数showStrAdd（索引）{
var tableRef=document.getElementById（'atable'）.getElementsByTagName（'tbody'）[0]；
var html=“你好，世界！”；
if（opentr！==未定义）{
tableRef.deleteRow（opentr）；
}
opentr=parseInt（索引）+1；
var row=tableRef.insertRow（opentr）；
row.style.height=“0”；
row.innerHTML=html；
row.style.height=“50px”；
};

html:


0 r1c1
r1c2
r1c3
点击
1 r2c1
r2c2
r2c3
点击
2 r3c1
r3c2
r3c3
点击

有什么想法吗？
转换在
tr
上不起作用。将内容包装在
div

例如：

转换在
tr
上不起作用。将内容包装在
div

例如：

问题是您需要先设置元素，让浏览器绘制，然后设置要转换的属性

像这样

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

        }

var-opentr；
var行；
函数showStrAdd（索引）{
var tableRef=document.getElementById（'atable'）.getElementsByTagName（'tbody'）[0]；
var html=“你好，世界！”；
if（opentr！==未定义）{
tableRef.deleteRow（opentr）；
}
opentr=parseInt（索引）+1；
行=表参考插入行（opentr）；
row.style.height=“0px”；
row.innerHTML=html；
设置超时（设置高度，1）；
};
函数设置高度（）{
row.style.height=“50px”；
}

请注意，高度的更改是在函数退出后执行的。这才是最重要的，不是拖延

它不会从0px高度开始，而是从允许呈现内容的最小高度开始。如果希望从0px开始，则应改为使用线条高度。
问题是，您需要先设置元素，让浏览器绘制，然后设置要转换的属性

像这样

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

        }

var-opentr；
var行；
函数showStrAdd（索引）{
var tableRef=document.getElementById（'atable'）.getElementsByTagName（'tbody'）[0]；
var html=“你好，世界！”；
if（opentr！==未定义）{
tableRef.deleteRow（opentr）；
}
opentr=parseInt（索引）+1；
行=表参考插入行（opentr）；
row.style.height=“0px”；
row.innerHTML=html；
设置超时（设置高度，1）；
};
函数设置高度（）{
row.style.height=“50px”；
}

请注意，高度的更改是在函数退出后执行的。这才是最重要的，不是拖延

它不会从0px高度开始，而是从允许呈现内容的最小高度开始。如果你想让它从0px开始，你应该改为使用线条高度。
动画怎么样？@CraigMorgan相同规则动画怎么样？@CraigMorgan相同规则我明白你的意思，但它实际上不起作用。然而，你给了我一个想法。我明白你的观点，但实际上并不奏效。然而，你给了我一个想法。
var html = "<td colspan='3'><div>hello world!</div></td>";

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

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

        }