CSS - Плавное изменение высоты в зависимости от содержимого

Question

У меня есть div, внутри которого изменяются разделы. Разделы имеют разную высоту.

При переходе от одного к другому высота div должна изменяться плавно. Пробовал ставить transition на div.

Дополнение: Я делаю на Angular. Внутри div стоит router-outlet. При переходе с одной страницы на другую его содержимое меняется. Изменяется и высота. Как сделать изменение высоты плавным, как если бы оно было со свойством transition?

Answer 1

вам придется находить скриптом исходное и конечное значение высоты div или router-outlet и проставлять их соответствующему элементу на лету - только тогда transition отработает. Браузер вычисляет все промежуточные значения свойств, на которые действует transition, ориентируясь на их начальное и конечное значения. А оных значений у элементов с неизвестными заранее свойствами (в вашем случае - чему равна height, если она auto?), разумеется, нет.

Answer 2

Вы хотели что-то типа такого?

btn.addEventListener('click', () => {
  content.classList.toggle('active');
});

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
}

#content {
  max-width: 300px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
}

#content::before {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255);
  transition: transform 0.3s ease-in-out;
  transform: translateY(100%);
}

#btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  background-color: black;
  color: white;
  cursor: pointer;
}

#content.active::before {
  transform: translateY(0);
}

<div id="content">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, sunt incidunt quos eligendi in esse iure eum quam aperiam nulla vero delectus sequi ipsam aut sit modi distinctio corrupti dolor?
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, sunt incidunt quos eligendi in esse iure eum quam aperiam nulla vero delectus sequi ipsam aut sit modi distinctio corrupti dolor?
</div>
<div id="btn">Клик</div>

Можно, конечно, менять высоту, но это плохо анимировать height, width, margin, padding: браузер перерисовывает страницу, когда мы анимируем эти свойства, это затратно по производительности

content.style.height = content.scrollHeight + 'px';

btn.addEventListener('click', () => {
  const height = content.scrollHeight;
  content.classList.toggle('active');
  if (content.classList.contains('active')) {
    content.style.height = '0px';
  } else {
    content.style.height = height + 'px';
  }
});

const ipsum = ' Lorem ipsum, dolor sit amet consectetur adipisicing elit.';

input.addEventListener('input', (e) => {
  const value = e.target.value;
  if (value > 9) return false; // чтобы нельзя было большие куски просто вводить в блок
  for (let i = 0; i < value; i++) {
    content.innerHTML += ipsum;
  }
  content.style.height = content.scrollHeight + 'px';
});

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
}

#btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  background-color: black;
  color: white;
  cursor: pointer;
}

#content {
  max-width: 300px;
  margin: 0 auto;
  margin-top: 10px;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

#input {
  position: absolute;
  right: 0;
  top: 0;
}

<div id="content">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, sunt incidunt quos eligendi in esse iure eum quam aperiam nulla vero delectus sequi ipsam aut sit modi distinctio corrupti dolor? Lorem ipsum, dolor sit amet consectetur adipisicing
  elit. Exercitationem, sunt incidunt quos eligendi in esse iure eum quam aperiam nulla vero delectus sequi ipsam aut sit modi distinctio corrupti dolor?
</div>
<div id="btn">Клик</div>
<input id="input" type="number" placeholder="Вводи 1-9 цифры">

БЛОГ НА HUSL

CSS - Плавное изменение высоты в зависимости от содержимого

Ответы (2 шт):