是否可以在 Javascript 中的 css3 转换期间获取目标计算的 css 属性值？

是否有可能在 Javascript 中的 css3 转换期间获取目标（最终）计算的 css 属性值？

我找到了这个答案：是否可以在 Javascript 中的 css3 转换期间获取目标 css 属性值？ https://stackoverflow.com/questions/18486458/is-it-possible-to-get-the-target-css-property-value-during-a-css3-transition-in

所以，我可以得到它

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

但这仅在 css 中指定目标 css 属性时才有效。我需要获取动态计算的目标属性值 - 未在 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);

JSFIDDLE： http://jsfiddle.net/R62yk/1/ http://jsfiddle.net/R62yk/1/

您可以使用window.getCompatedStyle https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle。尝试这个：

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