CSS侧边栏滑动动画无法完全滑入问题求助

算力阿峰

2026-6-25

修复右侧滑入侧边栏无法完全展开的问题

你的CSS代码里存在几个明显问题，导致侧边栏无法完全滑入：

有一行孤立的0%; /* Start off-screen */无效代码，直接删掉即可
.customization-tab里的right: -10}语法错误，既没写单位，数值也不对，初始位置设置错误
使用display: none会让动画无法正常触发——元素从隐藏状态切换到显示时，CSS动画不会执行
.customization-tab.open中的margin-right:15px会强制侧边栏与右侧保持间距，导致部分内容被挤出可视区域

修正后的代码（用动画实现）

/* 自定义侧边栏滑入动画 */
@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

.customization-tab {
  width: 200px;
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(100%); /* 初始状态完全移出屏幕右侧 */
  display: block; /* 保持元素在DOM中，用transform控制显示/隐藏 */
}

.customization-tab.open {
  animation: slideIn 2s forwards; /* 执行动画并保持最终状态 */
}

如果需要侧边栏与右侧留15px间距

调整初始位置和动画起点，确保滑入后完全显示：

@keyframes slideIn {
  from {
    transform: translateX(calc(100% + 15px));
  }
  to {
    transform: translateX(0%);
  }
}

.customization-tab {
  width: 200px;
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
  position: fixed;
  top: 0;
  right: 15px;
  transform: translateX(calc(100% + 15px));
  display: block;
}

.customization-tab.open {
  animation: slideIn 2s forwards;
}