使用css的transition属性实现抽屉功能

要使用CSS的transition属性实现抽屉功能，你可以通过改变元素的宽度或者Transform属性来实现动画效果。以下是一个简单的例子，演示了如何使用CSS来创建一个抽屉效果。

HTML结构：

<div class="drawer-container">
  <div class="drawer">
    <!-- Drawer content goes here -->
  </div>
  <button class="toggle-button">Toggle Drawer</button>
</div>

CSS样式：

.drawer-container {
  position: relative;
  width: 100%;
}
 
.drawer {
  position: absolute;
  width: 0;
  height: 100%;
  background-color: #f0f0f0;
  transition: width 0.3s ease-out;
  overflow-y: auto;
}
 
.drawer.open {
  width: 200px; /* or any other width you prefer */
}
 
.toggle-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
}

JavaScript控制打开和关闭抽屉：

document.querySelector('.toggle-button').addEventListener('click', function() {
  var drawer = document.querySelector('.drawer');
  drawer.classList.toggle('open');
});

在这个例子中，当点击按钮时，.drawer元素的open类被切换。.drawer元素在.open状态下会有一个宽度，这样就可以显示抽屉内容。transition属性确保了宽度变化是有动画效果的。