javascript - 在通过 CSS 转换元素的尺寸时获取元素的(最终)高度

Question

当请求当前处于 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

Answer 1

关于使用 setTimeout 的事情是你被迫使用一个有点随意的值。您可以使用requestAnimationFrame，它会强制代码在转换后执行

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

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