时间戳

首页 > 解决方案 > 在通过 CSS 转换其尺寸时获取元素的（最终）高度

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

问题描述

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

请参阅此代码笔示例

标签： javascriptjqueryhtmlcsscss-transitions

解决方案

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

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

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

推荐阅读