在通过 CSS 转换其尺寸时获取元素的（最终）高度答案

【问题标题】：Getting the (final) height of an element while its dimensions are being transitioned via CSS在通过 CSS 转换其尺寸时获取元素的（最终）高度
【发布时间】：2020-04-02 18:47:50
【问题描述】：

当请求当前处于 CSS 转换中的元素的尺寸时，jQuery 将返回在请求尺寸时给定时间元素的当前高度值。

虽然这是正确的，但通常并不是我们所需要的。在很多情况下，我想检索元素在转换后将具有的最终尺寸，但在转换仍在进行中时。

如何在元素仍处于过渡状态时可靠地检索元素的尺寸？

$(document).ready(function() {
  $('#one').on('click', function() {
    $(this).addClass('trans');
    $('#output').text($(this).height());
    var self = $(this);
    setTimeout(function() {
      $('#output').text(self.height());
    }, 200);
  });
});

#output {}

#one {
  width: 200px;
  height: 200px;
  background: red;
  transition: all 1s linear;
}

#one.trans {
  height: 600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="output">...</div>
<div id="one"></div>

看到这个codepen example

【问题讨论】：

如果不以某种方式解析相关类的 CSS，就无法知道元素的未来大小（这不是微不足道的，不会是高性能的，而且根本不可行解决方案）。即使使用getComputedStyle() 会在调用时检索样式，而不是预计的最终大小。我建议寻找另一种方法来实现你想要做的任何事情。这个解决方案是针对感知到的 CSS 缺点的 JS 创可贴吗？
这取决于你为什么想要这个。如果您使用 JS 更改值，则可以在 JS 中跟踪该值。如果您正在设置具有不同值的类，则可以使用与此解决方案类似（但不同）的东西来获取实际 CSS 类的属性：stackoverflow.com/questions/324486/…

标签： javascript jquery html css css-transitions

【解决方案1】：

使用setTimeout 的问题是你不得不使用一个有点随意的值。您可以使用requestAnimationFrame，它应该强制代码在转换后执行

很多时候，你需要等到第二个动画帧，所以：

requestAnimationFrame(function() {
    requestAnimationFrame(function() {
        $('#output').text(self.height());
    });
});

【讨论】：

谢谢。虽然这可能很有用，但其想法是不必等到过渡完成。我对setTimeout 的使用仅用于演示目的。
好的，我明白了。这似乎令人头疼……您需要从 css 文件本身中提取值……或者将其存储在用于定义特定 css 属性的 Javascript 变量中。或者只需等待几分之一秒。
我明白你的意思。一定会有更好的办法。我希望有。