<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.drawer {
position: fixed;
width: 500px;
height: 100%;
left: -500px;
top: 0px;
background: red;
transition: all 1s;
}
</style>
</head>
<body>
<!-- 关键在于过度动画的使用--transition: all 1s; -->
<div class="drawer"></div>
<button onclick="openDrawer()">打开抽屉</button>
<button onclick="closeDrawer()" style="float:right">关闭抽屉</button>
<script>
function openDrawer() {
document.querySelector(".drawer").style.left = "0px"
}
function closeDrawer() {
document.querySelector(".drawer").style.left = "-500px"
}
</script>
</body>
</html>
