Mr.Potato 前端
从下至上展开抽屉动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style>
.container {
margin: auto;
top: 460px;
width: 320px;
height: 30px;
position: relative;
background-color: rgba(0, 0, 0, 0.4);
overflow-y: auto;
scroll-behavior: smooth;
border-radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
display: none;
}
.expend {
animation: expend ease 1s forwards;
}
.close-container {
animation: no-expend ease 1s forwards;
}
@keyframes expend {
from {
top: 460px;
height: 30px;
}
to {
height: 330px;
top: 160px;
}
}
@keyframes no-expend {
from {
height: 330px;
top: 160px;
}
to {
top: 460px;
height: 30px;
}
}
.close {
color: aliceblue;
right: 0;
margin: 5px 10px;
position: absolute;
}
.title {
color: aliceblue;
height: 30px;
line-height: 30px;
margin: 0 10px;
position: absolute;
}
.list {
display: flex;
/* 子元素换行 */
flex-wrap: wrap;
white-space: nowrap;
padding-top: 24px;
}
.item {
width: 80px;
height: 80px;
margin: 40px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.item-img {
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<div class='container' id='container'>
<div class='title'>抽屉标题</div>
<div class='close' onclick='closeHandle()'>↑</div>
<div class='list'>
<div class='item'>
<img src="./Icon_template.png" class="item-img">
<span class='item-text'>内容1</span>
</div>
<div class='item'>
<img src="./Icon_template.png" class="item-img">
<span class='item-text'>内容2</span>
</div>
<div class='item'>
<img src="./Icon_template.png" class="item-img">
<span class='item-text'>内容3</span>
</div>
<div class='item'>
<img src="./Icon_template.png" class="item-img">
<span class='item-text'>内容4</span>
</div>
<div class='item'>
<img src="./Icon_template.png" class="item-img">
<span class='item-text'>内容4</span>
</div>
</div>
</div>
<script>
const closeHandle = () => {
console.log('关闭和展开');
const dom = document.getElementById('container');
const closeDom = document.getElementsByClassName('close')[0];
if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
dom.className = "container expend";
setTimeout(() => {
closeDom.innerText = 'X'
}, 100)
} else {
dom.className = "container close-container";
setTimeout(() => {
closeDom.innerText = '↑'
}, 100)
}
}
</script>
</body>
</html>