CSS【实战】抽屉动画

效果预览

在这里插入图片描述

技术要点

实现思路

元素固定布局（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>