Question

在元素转换完成后元素 预测维度是否有优雅的方法？

示例：

HTML：

<div id="demo">...</div>

CSS：

#demo { max-height: 0; overflow:hidden; transition: 2s max-height; } #demo.expand { max-height: 1000px; }

JS：

var demo = document.getElementById('demo'); demo.className = 'expand'; // Unfortunately the result will be 0px // because the current height is measured alert(demo.offsetHeight);

演示：

codepen

Answer 1

在元素转换完成后，是否有一种优雅的方法来测量元素的尺寸？

转换完成后，您可以使用transitionend事件查看元素的高度：

$('#demo').on("transitionend", function(e) { 
    console.log($('#demo').height());
}).addClass('expand');

这会给你一个20的值，我假设你正在寻找的是什么？ jsFiddle

Answer 2

您可以通过scrollHeight和scrollWidth属性检查所请求的内容渲染高度/宽度。

e.g。尝试将alert(demo.scrollHeight);添加到JS窗格。

Answer 3

如果我试图做这样的事情，我会得到包含元素的高度。如果那是窗口，那就去做吧。这应该可以获得每次动画前你想要的数字。

Answer 4

您可以将#demo放入包含height: 0的包装中，这将允许自动高度计算，然后转换包装以匹配#demo的高度，然后在转换结束时，将包装器高度更改为auto，这样它就会像平常一样流动。

Here is a JSFiddle to demonstrate.

（归功于@CBroe，我不知道on("transitionend", function)）

<强> HTML

<div id="demoWrapper">
    <div id="demo">
        // content
    </div>
</div>

<强> CSS

#demoWrapper {
    height: 0;
    overflow:hidden;
    background:red;
    transition: 2s height;
}

#demo {
    max-height: 1000px;
}

<强>的JavaScript

alert("Calculated height of #demo before transition: " + $('#demo').height());

$('#demoWrapper').height($('#demo').height()).on("transitionend", function(e) {
    $('#demoWrapper').css('height', 'auto');
});

Answer 5

内容也有一个高度，如果它被包装成标签，你可以轻松地检索它。

这里的文字包含在<p>中，对我来说似乎很公平： DEMO 。

Answer 6

BlakeGru的答案非常适合OP的问题，但不适用于我遇到的类似问题。为了完整起见，并且在对其他有用的情况下，这里是一种通用策略，用于在完成任何过渡之前找到元素的最终尺寸，该元素将在过渡真正开始之前就存在。

此示例更改元素的宽度（带有过渡），并获取过渡完成后元素将具有的高度（由内容自动确定）。

function resize(element, endingWidth) {
  // First, save any set transitions for later.
  var transitions = window.getComputedStyle(element).transition;
  // Now, disable any transitions so that our calculations will work properly.
  element.style.transition = 'none';
  // Get our current width.
  var startingWidth = element.offsetWidth + 'px';

  // Set a new width.
  element.style.width = endingWidth;
  // And get the element height. Because there are no transitions set, this will be the same height as at the end of any transitions.
  var endingHeight = element.offsetHeight;

  /*
   * Now do whatever calculations we want with the ending height.
   */
  alert(endingHeight);

  // Set the element's width back to when we started, so we have a start point for our transition.
  element.style.width = startingWidth;
  // Force the browser to recalculate the element's dimensions. This seemingly pointless call is absolutely critical for the transition to work.
  element.offsetWidth;

  // Now, we can set our desired transitions and the ending width again, and we're away.
  element.style.transition = transitions;
  element.style.width = endingWidth;
}

Fiddle

总体思路是：

删除所有过渡。
对元素的尺寸进行所需的更改。
测量所需的最终尺寸。
将元素的尺寸重置为初始值。
恢复过渡。
再次进行所需的更改。

在测量元素尺寸时忽略转换

6 个答案: