Вы можете добиться аналогичного поведения с помощью CSS-перехода по высоте. Они выглядят довольно гладко на рабочем столе (60 кадров в секунду достижимо, но не через полный переходный период). Если вам нужно больше контроля (например, закрывать другие навигационные элементы, когда открыты другие), вы можете удалить элементы-флажки и изменить элементы метки на «h2». Затем установите прослушиватель «onclick» для элементов «h2» в коде JS, который добавит класс (со стилями из «input: checked ~ ul») к выбранному «ul».
:root {
--liHeight: 1em
}
label {
cursor: pointer
}
ul {
opacity: 0;
height: 0px;
overflow: hidden;
transition: 0.3s;
}
ul li {
height: var(--liHeight);
}
input {
position: absolute;
opacity: 0;
}
input:checked ~ ul {
opacity: 1;
position: initial;
height: calc(7 * var(--liHeight));
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="item">
<label for="item1">
Item 1
</label>
<input id="item1" type="checkbox"/>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="item">
<label for="item2">
Item 2
</label>
<input id="item2" type="checkbox"/>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="item">
<label for="item3">
Item 3
</label>
<input id="item3" type="checkbox"/>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
</html>
Другим решением является написание анимации JS, например, с использованием API " window.requestAnimationFrame " для анимации высоты элемента "ul". (Я думаю, что именно это происходит на stripe.com )