<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>菜单展出动画</title>
<style>
html,body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
padding: 0;
margin: 0;
overflow: hidden;
background-color: bisque;
}
ul li{
height: 60px;
line-height: 60px;
text-align: center;
list-style: none;
cursor: pointer;
}
ul li:hover{
background-color: aquamarine;
}
.show{
animation: show 1s ease-in-out forwards;
}
.hide{
animation: hide .3s forwards;
}
@keyframes show {
from{
height: 0px;
}
to{
height: 240px;
}
}
@keyframes hide {
from{
height: 240px;
}
to{
height: 0px;
}
}
#toggle{
position: absolute;
z-index: 10;
padding: 10px 20px;
}
</style>
</head>
<body>
<input type="submit" value="切换" id="toggle">
<ul class="show">
<li>
<a>首页</a>
</li>
<li>
<a>首页</a>
</li>
<li>
<a>首页</a>
</li>
<li>
<a>首页</a>
</li>
</ul>
<script>
const toggle = document.querySelector("#toggle");
const ul = document.querySelector("ul")
toggle.addEventListener("click",function(){
if(getComputedStyle(ul).height=="0px"){
ul.classList.remove("hide")
ul.classList.add("show");
}else{
ul.classList.remove("show")
ul.classList.add("hide");
}
},)
</script>
</body>
</html>
