7

在考虑向 Chromium 提交错误时寻找解决方法 -

如果一个元素有一个过渡，getComputedStyle在过渡结束之前不会返回您期望它返回的内容。

长而短 - 如果我有一个高度为 24 像素的元素，并且添加一个类使其高度为 80 像素（带有往返过渡），并且两个高度都在样式表中定义 - 如果我设置该类并检查getComputedStyle，它仍然给我非班级高度，直到过渡结束。

我在这里谈论的一个示例：

<html>
    <head>
        <style>
            #foo {
                display: inline-block;
                background-color: red;
                height: 24px;
                padding: 4px 0;
                width: 200px;
                -webkit-transition-property: height;
                -webkit-transition-timing-function: linear;
                -webkit-transition-duration: 300ms;
            }
            #foo.changed {
                height: 80px;
            }
        </style>
    </head>
    <body>
        <div id="foo"></div>
        <p>before: <span id="before"></span></p>
        <p>after: <span id="after"></span></p>
        <script type="text/javascript">   
            var foo 
            function checkFoo(e) {
                foo.classList.toggle('changed');
                document.getElementById('before').innerText = window.getComputedStyle(foo, null).getPropertyValue("height");
            };

            window.addEventListener('load', function() {
                foo = document.getElementById('foo');

                foo.addEventListener('webkitTransitionEnd', function(e){
                document.getElementById('after').innerText = window.getComputedStyle(foo, null).getPropertyValue("height");
                });
    
                foo.addEventListener('click', checkFoo, false);
            });
        </script>
    </body>
</html>

此示例的小提琴在这里：http: //jsfiddle.net/bobbudd/REeBN/

（注意：这个小提琴只能在 webkit 中工作，它是我们所针对的一个浏览器，信不信由你——但我也在 Firefox 中测试并遇到了同样的问题）

问题是，我有多种情况需要在transitionEnd发生之前知道最终样式（有些人可能会说“计算”样式）。

或者我想这是一个更大问题的一部分 - 有很多不同的方法可以知道元素在特定时刻的高度，不应该getComputedStyle得到样式表（或样式属性）所说的属性应该是什么?

在你问我是否可以将最终数字放入 JS 之前，答案是（不幸的是）不能。

谁能想到在过渡结束之前获得这个最终值的方法？

4

1 回答 1

1

这根本不是一个错误。getComputedStyle旨在在您调用它时返回属性的客户端呈现值。如果您在转换期间调用它，您将在转换期间获得值，如下所示：http: //jsfiddle.net/REeBN/1/

获得规则设置的最终值的方法是检查规则本身，可能通过使用cssRules.

这是一个使用window.getMatchedCSSRules：

cssRules = window.getMatchedCSSRules(this);
var finalCssRule = "";
for(var i = 0; i < cssRules.length; i++){
    if(cssRules[i].selectorText == "#foo.changed"){
        finalCssRule = cssRules[i];
    }
}
document.getElementById('final').innerText = finalCssRule.cssText;

这是一个演示：http: //jsfiddle.net/REeBN/2/

于 2012-12-01T15:59:40.620 回答