效果预览
技术要点
实现思路
- 元素固定布局（fixed）在窗口最右侧外部
- js 定时器改变元素的 right 属性，控制元素移入，移出
过渡动画 transition
transition: 过渡的属性 过渡的持续时间 过渡时间函数 延迟时间
此处改变的是 right 属性，过渡动画的写法为
transition: right 0.3s;
盒模型
推荐用 IE 盒模型，方便控制元素的定位，避免添加 padding 后的误判。
代码实现
<!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>CSS 抽屉</title>
<style>
#drawer-container {
background-color: rgb(51, 172, 242);
color: white;
padding: 10px;
box-sizing: border-box;
width: 300px;
height: 100%;
position: fixed;
right: -300px;
top: 0;
transition: right 0.3s;
}
</style>
</head>
<body>
<div id="drawer-container">抽屉里的内容</div>
<script>
const drawerContainer = document.getElementById("drawer-container");
setTimeout(() => {
drawerContainer.style.right = "0px";
}, 1000);
setTimeout(() => {
drawerContainer.style.right = "-300px";
}, 3000);
</script>
</body>
</html>
