getComputedStyle 和转换答案

【问题标题】：getComputedStyle and transitionsgetComputedStyle 和转换
【发布时间】：2012-11-19 07:26:27
【问题描述】：

在考虑向 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 之前，答案是（很遗憾）不能。

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

【问题讨论】：

我不太清楚这个问题。我从中得到的是在元素被实际触发之前你想要一些值？
no - 元素已经被触发，所以我期待新值（80px），但在过渡结束之前它不会给我那个新值。我需要一种方法来在触发发生后立即获取它，但在过渡结束之前。

标签： javascript dom-events css-transitions

【解决方案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/

【讨论】：

这是我担心的。这是针对应用程序框架的，因此获取特定应用程序的 cssRules 可能证明过程比值得花费更长的时间。感谢您的回答。
@el_bob 我添加了一个示例，说明如何检索适当的规则。
是的，我看到了 - 谢谢。由于我们只构建框架而不是应用程序，看起来我们必须对所有getMatchedCSSRule 选择器进行评分，以查看我们将使用哪个选择器。再一次，我考虑过这一点，并认为它不是最优的就扔掉了。如果有一种方法可以直接告诉元素 A 与其当前选择器应该是什么样子，而无需解析任何信息。
@el_bob 解决方法可能是最初不进行过渡。应用类并找到高度（将立即改变），然后将其删除。接下来，应用具有转换规则的类并重新应用原始类。希望这是有道理的。
确实如此，不幸的是我之前考虑过你的方法，这就是我担心我必须做的事情——但我并不热衷于解决一些问题。我只是希望有更直接的路线。