Is it possible to get the target calculated css property value during a css3 transition in Javascript?

Question

Is it possible to get the target (final) calculated css property value during a css3 transition in Javascript?

I found this answer: Is it possible to get the target css property value during a css3 transition in Javascript?

So, I can get it as

document.getElementById('transition_div').style.width

BUT this works only when target css property is specified in css. I need get target property value which is calculated dynamicaly - not specified in CSS.

HTML:

<table>
    <tr>
        <td id="cell-1">CELL 1</td>
        <td id="cell-2">CELL 2</td>
        <td id="cell-3">CELL 3 some text</td>
    <tr>
<table>

CSS

td {
    transition: all 3s linear;
}

JS

setTimeout(function() { //let's browser draw initial state
    document.getElementById("cell-1").style["min-width"] = "300px"; //resize one of cells

    setTimeout(function() {
        //NOW, a second later, transition is in progress

        //HOW to get target width of #cell-3 ????

    }, 1000);

}, 0);

JS FIDDLE: http://jsfiddle.net/R62yk/1/

Answer 1

You can use window.getComputedStyle . Try this:

setTimeout(function() { //let's browser draw initial state
    document.getElementById("cell-1").style["min-width"] = "300px"; //resize one of cells

    setTimeout(function() {
        //NOW, a second later, transition is in progress

        //HOW to get target width of #cell-3 ????
        var cell = document.getElementById("cell-3"),
            width = getComputedStyle(cell,null).getPropertyValue("width");
        // computed width is 206px
    }, 1000);

}, 0);