创建一个在给定时间后出现的滑动CSS抽屉

<div class="drawer-container">
  <div class="drawer-content">
    <!-- 抽屉内容 -->
  </div>
  <button class="drawer-trigger">打开抽屉</button>
</div>

.drawer-container {
  position: relative;
  overflow: hidden;
}

.drawer-content {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  transition: left 0.3s ease;
}

.drawer-trigger {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}

const trigger = document.querySelector('.drawer-trigger');
const content = document.querySelector('.drawer-content');

trigger.addEventListener('click', () => {
  content.style.left = '0';
});