Максимальная высота перехода с произвольными значениями TailwindCSS

Я пытаюсь анимировать максимальную высоту div от 0 до 100%, используя функцию произвольных значений Tailwind, но это не работает:

document.getElementById("toggle").addEventListener("click", () => {
  document.getElementById("txt").classList.toggle("max-h-full");
  document.getElementById("txt").classList.toggle("max-h-0");
});
<script src = "https://cdn.tailwindcss.com"></script>
<button id = "toggle" class = "m-3 p-2 border hover:bg-slate-300">Toggle text</button>
<p id = "txt" class = "m-3 border overflow-hidden max-h-full transition-[max-height] ease-out">
  This is a text.<br>That can be collapsed.<br>Or expanded.<br>And so forth.<br>Et cetera.
</p>

Он просто схлопывается и расширяется мгновенно, без каких-либо переходов max-height.

Странно то, что я вижу, что в инструментах разработчика устанавливаются правильные свойства:

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-property: max-height;
transition-duration: 150ms;

Плюс конечно max-height.

Что еще мне нужно установить или настроить для перехода?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
34
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вероятно, это проблема CSS, а не проблема TailwindCSS.

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

Если вы не хотите установить определенную высоту (например, 100px) или использовать какой-либо JavaScript, насколько я знаю, нет никакого способа сделать эту анимацию.

Поскольку похоже, что вы пытаетесь создать аккордеон, я бы порекомендовал ознакомиться с этой статьей, в которой используется WebAnimationsApi для достижения того же эффекта, к которому вы стремитесь: https://css-tricks.com/how-to-animate-the-details-element-using-waapi/

Подробнее: как анимировать ширину и высоту на 100% с помощью анимации css3?

Ах, ты прав. Другой пост, на который я ссылался также использует фиксированный 500pxmax-height, чтобы обманом выйти из ситуации.

Jeroen 04.04.2022 09:08

Другие вопросы по теме