Как анимировать динамическое изменение высоты с помощью 'height: fit-content' - PullRequest
Новая
       20

Как анимировать динамическое изменение высоты с помощью 'height: fit-content'

0 голосов
/ 16 сентября 2018

У меня есть div с height: fit-content. В то время как я добавляю новые плавающие текстовые узлы к этому div, высота div постепенно увеличивается, чтобы соответствовать его новой высоте содержимого.

Как я могу анимировать это изменение высоты аналогично изменению высоты в жестком коде с помощью transition: height 1s;?

Если бы я знал высоту div до и после , к этому div были присоединены новые плавающие текстовые узлы, которые я мог бы просто использовать transition: height 1s; и установите height элемента div на новую высоту после присоединения дочерних узлов. => Плавный переход.

К сожалению, я не знаю высоты цели (хотя я бы также предпочел решение только для CSS), так как текст еще не отображается. Также в моем документе доступны только ванильные JS и CSS.

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

document.querySelector('button')
  .addEventListener(
    'click',
    () => document.querySelector('div')
      .appendChild(document.createTextNode(' How to animate this change in height?')));
div {
  background-color: lightblue;
  border: 1px solid black;
  width: 100px;
  height: fit-content;
}
<button type="button">toggle</button>

<div>
some text<br />
even more text<br />
so much text
</div>

1 Ответ

0 голосов
/ 16 сентября 2018

Хотя это сложный способ JS, решение проблемы можно решить следующим образом:

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

Высота внутреннего div скачет, как в коде вопроса, так как его высота соответствует его содержимому,Этот прыжок скрыт внешним div, который имеет статическую жестко заданную высоту.После добавления текстовых узлов высота внешнего элемента обновляется, чтобы соответствовать внутренней (размер границы в настоящее время не учитывается при расчете).Так как он имеет CSS transition для свойства height, он плавно увеличивается до целевого размера. 

function updateDiv() {
  outer.style.height = inner.clientHeight + 'px';
}

const inner = document.querySelector('div.inner');
const outer = document.querySelector('div.outer');

document.querySelector('button')
  .addEventListener(
    'click',
    () => {
      inner.appendChild(document.createTextNode(' How to animate this change in height?'));
      updateDiv();
    });

updateDiv();
div.outer {
  background-color: lightblue;
  border: 1px solid black;
  width: 100px;
  
  overflow: hidden;
  height: 0;
  transition: height 1s;
}

div.inner {
  background-color: purple;
  
  width: 100%;
  height: fit-content;
}
<button type="button">toggle</button>

<div class="outer">
  <div class="inner">
    some text<br /> even more text<br /> so much text
  </div>
</div>
...