Как скрыть li с эффектом слайда в css
У меня есть ul, и, щелкнув один из его li, я хочу скрыть в нем дополнительный ul с эффектом скольжения. Я пробовал animation с height от 100% до 0. Но это не работает.
Это фрагмент кода, и в реальном сценарии будут динамические данные, а не li.
function hide() {
var li = document.getElementById("game");
game.classList.add("hide")
}.hide {
height: 0;
overflow: hidden;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {
height: 100%;
}
25% {
height: 75%;
}
50% {
height: 50%;
}
100% {
height: 0%;
}
}<ul>
<li>A</li>
<li onclick = "hide()">b</li>
<li id = "game" style = "height:100%">
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>Как я могу этого добиться?
для этого вы можете использовать css transition.
не могли бы вы дать фрагмент кода
@SunilGarg, взгляните на этот рабочий пример, я играю с шириной, и для получения дополнительной информации вы можете посмотреть W3School Transition
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Использование процентов в вашем примере не сработает.
Решение 1: Вам нужно установить фиксированную высоту в @keyframes следующим образом:
function hide() {
var li = document.getElementById("game");
game.classList.add("hide")
}.hide {
height: 0;
overflow: hidden;
animation-name: example;
animation-duration: 1s;
}
@keyframes example {
0% {
height: 40px;
}
25% {
height: 30px;
}
50% {
height: 20px;
}
100% {
height: 0px;
}
}<ul>
<li>A</li>
<li onclick = "hide()">b</li>
<li id = "game">
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>Решение 2: Добавьте фиксированную высоту к родительскому элементу <ul>, а затем вы можете использовать проценты в своих @keyframe следующим образом:
function hide() {
var li = document.getElementById("game");
game.classList.add("hide")
}.hide {
height: 0;
overflow: hidden;
animation-name: example;
animation-duration: 1s;
}
ul {
height: 200px;
}
@keyframes example {
0% {
height: 100%;
}
25% {
height: 75%;
}
50% {
height: 50%;
}
100% {
height: 0%;
}
}<ul>
<li>A</li>
<li onclick = "hide()">b</li>
<li id = "game">
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>Вот статья, который подробно описывает эту тему.
это работает, но в реальном сценарии данные привязываются динамически, поэтому не может быть n no if li, так как я могу определить, с какого px мне следует начать?
@SunilGarg А, это хороший момент. Вы должны отредактировать свой вопрос, чтобы указать, что эти данные являются динамическими. В этом случае, если вы зададите родительскому элементу <ul> фиксированную высоту, вы можете использовать проценты. Причина, по которой проценты не работают в вашем примере, заключается в том, что нет элемента с фиксированной высотой, поэтому, когда вы добавляете процент, средство визуализации похоже на «50% чего ?!» Ничто не имеет фиксированной высоты, поэтому я должен визуализировать этот элемент 50% высота чего ?! " Я добавил решение, в котором вы можете использовать проценты, если вы установите фиксированную высоту для родительского элемента. Вы также можете изучить использование устройств vh.
Разве я не могу указать высоту в%, потому что я не знаю номер li, поэтому я не знаю начальную высоту в пикселях? и я обновил вопрос
@SunilGarg Я обновил свой ответ. Где-то вам понадобится фиксированная высота, поэтому, возможно, вы могли бы установить высоту <ul> на жестко запрограммированное значение единиц vh, если он должен реагировать. Если это помогло, отметьте мой ответ как принятый. Спасибо и удачи.
@SunilGarg В конечном итоге вам, возможно, придется использовать JavaScript для динамической регулировки высоты элемента <ul>. Например, если есть x элементов <li> и вы знаете, что вам нужен 20px для каждого из них, то вы можете использовать JavaScript, чтобы установить высоту <ul> на x * 20px.
Исправьте проблему со 100% высотой, и ваша анимация будет работать