如何确定 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>

---

目前，这些是我能想象到的唯一解决方案(它们都是荒谬的(：

1. 克隆整个网页HTML，使克隆具有opacity: 0; pointer-events: none并秘密呈现未来。

2. 捕获当前页面的绘制数据(基本上是屏幕截图(，在秘密修改页面的同时叠加，获取我的未来，还原并删除屏幕截图覆盖。

3. 与数字 2 类似，有没有办法❄️❄️将页面渲染冻结 3-4 帧？

4. 我记得很久以前看到一个"尺寸工人"的东西——或者更确切地说。 现在找不到任何信息，但似乎它可能有用？

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

您可以即时克隆具有相同转换的元素，延迟为 0，然后计算它的宽度和高度，然后对实际元素执行您想要的操作 它仍在动画