我有一个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>我怎样才能做到这一点？
在您的示例中使用百分比不起作用。
解决方案 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像这样在s 中使用百分比：
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句