Как я могу определить, какого размера будет элемент 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. Я помню, как видел "калибровочного работника" что-то, или, скорее, долгое время go. Не удалось найти информацию об этом сейчас, но кажется, что это может быть полезно?

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

Вы можете клонировать на лету элемент с таким же преобразованием с задержкой 0 , а затем рассчитать его ширину и высоту, а затем сделать то, что вы хотите, с вашим фактическим элементом, который все еще анимируется

Answer 3

Также имейте в виду, что пользователь может увеличить по желанию! Различные браузеры могут отображать одно и то же по-разному. Вы действительно не знаете, насколько большим будет элемент, пока он этого не сделает.

Я не знаю, сможете ли вы получить что-нибудь, указав display: none; ... будет ли браузер потрудиться сделать эти вычисления для объекта, который не виден.

Answer 4

Я бы предложил клонировать страницу в iframe, а затем расположить iframe вне экрана.

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