Нет CSS-перехода для 'height: fit-content' - PullRequest
Новая
       46

Нет CSS-перехода для 'height: fit-content'

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

Я использую transition: height 500ms, чтобы добавить анимацию к элементу, который открывается с помощью кнопки с height: 0 до height: 100px и наоборот.

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

К сожалению, это отключает анимацию.

Как получить анимацию вместе с элементом div, размер которого подходитего содержание?

Следующий фрагмент кода показывает поведение: 

document.querySelector('button')
  .addEventListener(
    'click',
    () => document.querySelectorAll('div')
      .forEach(div => div.classList.toggle('closed')));
div {
  background-color: lightblue;
  border: 1px solid black;
  overflow: hidden;
  transition: height 500ms;
}

div.closed {
  height: 0 !important;
}

div.div1 {
  height: 100px;
}

div.div2 {
  height: fit-content;
}
<button type="button">toggle</button>

<h1>'height: 100px' => 'height: 0'</h1>
<div class="div1">
some text<br />
even more text<br />
so much text
</div>

<br>

<h1>'height: fit-content' => 'height: 0'</h1>
<div class="div2">
some text<br />
even more text<br />
so much text
</div>

Ответы [ 2 ]

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

Как сказал Мишель, другим решением является использование max-height.Вот рабочий пример этого решения.

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

Надеюсь, это поможет.

https://www.w3schools.com/css/css3_transitions.asp

document.querySelector('button')
  .addEventListener(
    'click',
    () => document.querySelectorAll('div')
      .forEach(div => div.classList.toggle('closed')));
div {
  background-color: lightblue;
  border: 1px solid black;
  overflow-y: hidden;
	max-height: 75px; /* approximate max height */
	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(1, 1, 1, 1);
}
div.closed {
   max-height: 0;
}
<button type="button">toggle</button>

<h1>'height: 100px' => 'height: 0'</h1>
<div class="div1">
some text<br />
even more text<br />
so much text
</div>

<br>

<h1>'height: fit-content' => 'height: 0'</h1>
<div class="div2">
some text<br />
even more text<br />
so much text
</div>
0 голосов
/ 14 сентября 2018

Одним из возможных решений, хотя и не идеальным, является анимация font-size вместо height.

. Другим решением может быть анимация max-height вместо height.Вы можете использовать max-height скажем, 300px или 500px.но если вам нужно больше, это не будет хорошо выглядеть.

здесь я анимирую размер шрифта.

Надеюсь, это поможет.Спасибо. 

document.querySelector('button')
  .addEventListener(
    'click',
    () => document.querySelectorAll('div')
      .forEach(div => div.classList.toggle('closed')));
div {
  background-color: lightblue;
  border: 1px solid black;
  overflow: hidden;
  transition: font-size 500ms;
}

div.closed {
  font-size: 0 !important;
}

div.div1 {
  font-size: 14px;
}

div.div2 {
  font-size: 14px;
}
<button type="button">toggle</button>

<h1>'height: 100px' => 'height: 0'</h1>
<div class="div1">
some text<br />
even more text<br />
so much text
</div>

<br>

<h1>'height: fit-content' => 'height: 0'</h1>
<div class="div2">
some text<br />
even more text<br />
so much text
</div>
...