1

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

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

我需要知道的是转换后 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. 捕获当前页面的绘制数据（基本上是截图），覆盖那个同时偷偷修改页面，get my future，还原，去掉截图覆盖。

  3. 与第 2 点类似，有没有办法❄️freeze❄️ 将页面渲染 3-4 帧？

  4. 我记得很久以前见过一个“尺寸工人”。现在找不到任何关于它的信息，但似乎它可能有用？

4

4 回答 4

2

您可以简单地更改属性，测量您想要的尺寸，然后将属性更改回来。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>

于 2020-02-04T16:49:59.240 回答
0

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

<iframe style="width:100vw;height:100vh;left:-101vw;positionabsolute"><iframe>
于 2020-02-04T16:54:32.907 回答
0

还要记住，用户可以随意放大和缩小！不同的浏览器可能会以不同的方式呈现相同的内容。在它这样做之前，你真的不知道一个元素会有多大。

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

于 2020-02-04T16:57:57.927 回答
0

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

于 2020-02-04T17:06:00.477 回答