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

Posted 2023-03-05

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

【英文标题】：Is it possible to get the target calculated css property value during a css3 transition in Javascript?

【发布时间】：2013-09-29 07:16:49

【问题描述】：

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

我找到了这个答案： Is it possible to get the target css property value during a css3 transition in Javascript?

所以，我可以得到它

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

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

【问题讨论】：

Find all CSS rules that apply to an element 的可能副本

【参考方案1】：

您可以使用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);

【讨论】：

感谢您的回答！但是计算样式提供的是实际值，而不是目标值

对不起，我不明白，你所说的“目标值”到底是什么意思？

@Simone 目标值是过渡的最终值，而当您调用 getComputedStyle 时，您会得到当前的插值。