实现方案
隐藏抽屉
通过css属性translate或left设置为大于抽屉宽度的负值，使抽屉元素的位置在视窗之外。
为确保元素不可见，还可以设置visibility: hidden或opacity: 0使其完全不可见。
隐藏方法
- 通过一个和抽屉(class为
drawer)同父的隐藏的checkbox(id为demo_show_check)z记录状态，通过label包裹的◀作为切换按钮。
<div id="demo">
<input type="checkbox" id="demo_show_check" style="display: none;"/>
<div class="show">
<label for="demo_show_check"> ◀ </label>
</div>
<div class="drawer">
<h3>DrawerDemo</h3>
</div>
</div>
- 设置抽屉的css，zIndex必须高于其他元素，保证其显示在最上面。
.drawer{
display: flex;
flex-direction: column;
position: fixed;
flex: 1 1 auto;
top: 0;
left: 0;
width: 180px;
z-index: 300;
}
.show {
position: fixed;
z-index: 301;
top: 0;
left: 175px;
transition: all 1.2s;
}
- 设置抽屉和切换按钮的css过渡动画时间，二者的时间尽量一致，保证同步左移或右移。
.show {
transition: all 1.2s;
}
.drawer {
transition: all 1.2s;
}
- 通过css
:checked选择器结合兄弟节点选择器控制抽屉的css。当checkbox被选中时设置translate属性为大于抽屉宽度的负值，并设置透明度为0以达到抽屉收缩的目的；当checkbox未选中时该css不起作用，抽屉将正常展示。同时切换按钮也同步移动并翻转
#demo_show_check:checked ~ .drawer {
translate: -200px;
visibility: hidden;
opacity: 0;
}
#demo_show_check:checked ~ .show {
left:0;
transform: rotateY(180deg);
}
完整代码
<!DOCTYPE html>
<html lang="zh">
<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>纯CSS+HTML实现抽屉展开隐藏</title>
<style>
#demo .drawer{
display: flex;
flex-direction: column;
position: fixed;
flex: 1 1 auto;
top: 0;
left: 0;
word-wrap: break-word;
background-color: #ffffff78;
background-clip: border-box;
border-radius: .25rem;
width: 180px;
height: auto;
border-width: 0;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
padding: 4px 4px 8px 4px;
z-index: 300;
}
#demo .show {
position: fixed;
z-index: 301;
top: 0;
left: 175px;
transition: all 1.2s;
color: chocolate;
}
#demo .show label{
height: 1em;
}
#demo_show_check:checked ~ .show {
left:0;
transform: rotateY(180deg);
}
#demo_show_check:checked ~ .drawer {
translate: -200px;
visibility: hidden;
opacity: 0;
}
#demo_show_check {
display: none;
}
#demo .drawer {
transition: all 1.2s;
}
body {
background:linear-gradient(bisque,burlywood);
height: 100vh;
max-height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="demo">
<input type="checkbox" id="demo_show_check"/>
<div class="show">
<label for="demo_show_check"> ◀ </label>
</div>
<div class="drawer">
<h3>DrawerDemo</h3>
<ul style="padding-left: 22px;">
<li>通过<code>#demo_show_check</code>的选中状态控制显示隐藏。</li>
<li>当选中时，使<code>.drawer</code>左移到屏幕外隐藏。</li>
</ul>
</div>
</div>
</body>
</html>
