我如何确定 HTML 元素的大小？（补间大小作为添加的元素）

Question

我很确定这目前是不可行的。

我有一个动画涉及元素从绝对位置移动到内联位置。由于某些原因，我不知道容器的大小，也不知道我正在设置动画的元素的大小。

我需要知道的是 HTML 元素在转换后的大小，没有任何抖动绘图。

这使得问题变得非常困难（可能无法解决），因为我无法知道添加元素是会调整父元素的大小，还是会调整元素本身的大小。

我需要的是一种展望未来的方式。

const byId = (id) => document.getElementById(id);

#container {
  height: 3em;
  min-width: 50%;
  background: teal;
 }

#mystery {
  background: purple;
}

<div id="container">
  <div id="mystery">Some Text</div>
</div>


<button onClick='byId("mystery").style.position = "relative"'>Position Relative</button>
<button onClick='byId("mystery").style.position = "absolute"'>Position Absolute</button>

目前，我能想到的解决方案只有这些（它们都很荒谬）：

克隆整个网页HTML，让克隆有opacity: 0; pointer-events: none，渲染未来的秘密
抓取当前页面的绘制数据（基本是截图），在偷偷修改页面的同时叠加，得到我的未来，还原，去除截图叠加。
类似2，有没有办法❄️冻结❄️渲染一个页面3-4帧？
我记得很久以前看过 "sizing worker" 某物或更确切地说。现在找不到任何相关信息，但似乎它可能有用？

Answer 1

您可以简单地更改属性，测量您想要的尺寸，然后将属性改回来。 JS 足够快，可以在渲染之间完成所有这一切，只要你将它们都放在同一个线程中。你试过了吗？

提问者编辑：这是证明它有效的代码。

function byId(id){ return document.getElementById(id); }
const tweenyEl = byId("tweeny");

function appendTweeny() {
  tweenyEl.style.opacity = "1";
  const startingWidth = tweenyEl.clientWidth + "px"
  tweenyEl.style.position = "relative";
  const targetWidth = tweenyEl.clientWidth + "px";
  console.log(startingWidth, targetWidth);
  
  tweenyEl.style.width = startingWidth;
  requestAnimationFrame(() => 
    requestAnimationFrame(() =>
      tweenyEl.style.width = targetWidth
    )
  );
}

function resetTweeny() {
  tweenyEl.style.position = "";
  tweenyEl.style.width = "";
  tweenyEl.style.opacity = "0.1";
}

#container {
  display: inline-block;
  height: 3em;
  min-width: 150px;
  background: teal;
}

#tweeny {
  font-family: arial;
  color: white;
  position: absolute;
  background: purple;
  transition: all 0.5s ease;
  opacity: 0.1;
}

<div id="container">
  <div id="tweeny">I'm Tweeny</div>
</div>

<br>
<button onClick='appendTweeny()'>Append Tweeny</button>
<button onClick='resetTweeny()'>Reset Tweeny</button>

Answer 2

我建议将页面克隆到 iframe 中，然后将 iframe 放置在屏幕之外。

<iframe style="width:100vw;height:100vh;left:-101vw;positionabsolute"><iframe>

Answer 3

另请记住，用户可以缩放随意进出！不同的浏览器可能会以不同的方式呈现相同的内容。你真的不知道一个元素有多大，直到它这样做。

我不知道您是否可以通过指定 display: none;...浏览器是否愿意为不可见的对象进行这些计算。

Answer 4

你可以克隆on the fly一个具有相同变换的元素delay 0然后计算它的宽度和高度，然后做什么你想要你的实际元素它仍然是动画

我如何确定 HTML 元素的大小？（补间大小作为添加的元素）

How can I figure out what size an HTML Element will be? (tween size as element added)

javascript

animation

htmlelements

我如何确定 HTML 元素的大小？ （补间大小作为添加的元素）

How can I figure out what size an HTML Element will be? (tween size as element added)

javascript

animation

htmlelements

我如何确定 HTML 元素的大小？（补间大小作为添加的元素）