如何在CSS中使用幻灯片效果隐藏Li

Question

我有一个ul，单击其中一个li我想在其中隐藏子ul并具有滑动效果。我已经尝试animationheight从 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>

我怎样才能做到这一点？

Answer 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>

这是一篇详细介绍此主题的文章。