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. 現在のページのペイントデータ（基本的にはスクリーンショット）をキャプチャし、ページをこっそり修正しながらオーバーレイし、自分の未来を取得し、元に戻し、スクリーンショットのオーバーレイを削除します。

  3. 番号 2 と同様に、3 ～ 4 フレームのページのレンダリングを❄️フリーズ❄️する方法はありますか?

  4. かなり前に「サイジングワーカー」を見たのを覚えています。今のところ情報はありませんが、何か役に立ちそうですか？

4

4 に答える 4