侧边栏打开和关闭部分的CSS效果

.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #ccc;
  transition: width 0.5s ease;
}

.sidebar.open {
  width: 300px;
}

.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #ccc;
  animation-duration: 0.5s;
}

.sidebar.open {
  width: 300px;
  animation-name: slideIn;
}

@keyframes slideIn {
  0% {
    width: 200px;
  }
  100% {
    width: 300px;
  }
}

<div class="sidebar" id="sidebar">
  <!-- sidebar content -->
</div>

<button id="openBtn">打开侧边栏</button>
<button id="closeBtn">关闭侧边栏</button>

<script>
  const sidebar = document.getElementById('sidebar');
  const openBtn = document.getElementById('openBtn');
  const closeBtn = document.getElementById('closeBtn');

  openBtn.addEventListener('click', function() {
    sidebar.style.width = '300px';
  });

  closeBtn.addEventListener('click', function() {
    sidebar.style.width = '200px';
  });
</script>