获取元素的(最终)高度，同时通过 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>

请参阅此代码笔示例

Answer 1

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

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

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