CSS разворачивает анимацию высоты ограничивающей рамки ⇐ CSS

Разбираемся в CSS
Anonymous
CSS разворачивает анимацию высоты ограничивающей рамки

Сообщение Anonymous »

Мне нравится разворачивать и анимировать тело таблицы.

Код: Выделить всё

@keyframes unfolding{
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
tbody{
animation-duration: 2s;
animation-name: unfolding;
}

Код: Выделить всё


Start


unfolding td


End



К сожалению, высота ограничивающей рамки тела не анимируется. «Конец» должен начинаться прямо под «Началом» и двигаться вниз в течение 2-секундной анимации. Как это сделать, не зная конечной высоты тела?
Не дубликат Как я могу перейти высоту: 0; по высоте: авто; используя CSS?
Изменить: потому что ни в одном вопросе не упоминается проблема растущей ограничивающей рамки, и ни один ответ не решил проблему растущей ограничивающей рамки. Например, в первых ответах упоминается максимальная высота, которая игнорируется tbody. Второй ответ полностью игнорирует растущую ограничивающую рамку и использует клип, который не перемещает нижнюю часть вниз.

Подробнее здесь: https://stackoverflow.com/questions/793 ... oxs-height

Вернуться в «CSS»