Я пытаюсь анимировать максимальную высоту 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, а не проблема TailwindCSS.
CSS хочет быть быстрым, поэтому есть несколько значений, которые вы не можете использовать для анимации. Когда родитель не имеет определенных размеров, одним из этих неанимируемых значений является 100%
.
Если вы не хотите установить определенную высоту (например, 100px
) или использовать какой-либо JavaScript, насколько я знаю, нет никакого способа сделать эту анимацию.
Поскольку похоже, что вы пытаетесь создать аккордеон, я бы порекомендовал ознакомиться с этой статьей, в которой используется WebAnimationsApi для достижения того же эффекта, к которому вы стремитесь: https://css-tricks.com/how-to-animate-the-details-element-using-waapi/
Подробнее: как анимировать ширину и высоту на 100% с помощью анимации css3?
Ах, ты прав. Другой пост, на который я ссылался также использует фиксированный
500px
max-height
, чтобы обманом выйти из ситуации.