CODEWITHSUNDEEP
javascriptcss
Craig Morgan
Craig Morgan

Reputation: 962

CSS transition not working when using table insertRow

I am inserting a row into a table using the javascript insertRow() method. This works just fine - see Plunk

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

My problem is that I want to apply a css transition to the insertion. So I thought the best way would be to add the row, apply a height of 0px, insert the innerHTML and then set the height to 50px. I have set the tr transition in the css to transition: height 1s;

Trouble is, the transition does not work.

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>

Any ideas?

Upvotes: 2

Views: 2347

Answers (2)

vals
vals

Reputation: 64244

The problem is that you need to set first your element, let the browser draw, and then set the property to be transitioned.

Like this

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

        }

Notice that the change in height is executed after the function exits. This is what it is important, not the delay !

It will not begin at 0px height, but at the minimum height that allows the content to be rendered. If you want it to begin at 0px, you should use line-height instead.

Upvotes: 1

Surjith S M
Surjith S M

Reputation: 6740

Transitions will not work on tr. Wrap the content in a div

Eg:

var html = "<td colspan='3'><div>hello world!</div></td>";

Then style it

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

Upvotes: 4

Related Questions