CSS расширить / анимацию контракта, чтобы показать / скрыть контент ⇐ CSS

[Anonymous]

Я пытаюсь создать коробку, которая может расширяться и разрушаться с простой анимацией. Если вы запустите пример ниже, идея заключается в том, что она начинается с одной красной линии, и когда вы нажимаете кнопку, она разделяется на две линии чтения и аккуратно разворачивается, чтобы раскрыть контент, например, вытянуть рисунок из таблицы. < /p>

Содержимое ящика должно расширяться в размере < /p>

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

function expandContract() {
const el = document.getElementById("expand-contract")
el.classList.toggle('expanded')
el.classList.toggle('collapsed')
}< /code>
#container {
border: 1px solid black;
padding: 15px;
}

#top-section {
border-bottom: 1px solid red;
}

#expand-contract {
border-bottom: 1px solid red;
}

.expand-contract {
transform: translateY(-100%)
overflow: hidden;
}

@keyframes slide-in {
100% {
transform: translateY(0%)
}
}

.expanded {
background-color: green;
animation-name: slide-in;
animation-duration: 1s;
}

.collapsed {
background-color: red;
transform: translateY(-100%)
}< /code>


This is always displayed

This section expands and contracts


test1
test2
test3
test4


This section is always displayed



Expand/Contract

Подробнее здесь: https://stackoverflow.com/questions/481 ... de-content