咨询：优化div从左到右隐藏动画，解决卡顿与元素异常问题

核心思路 #

放弃通过修改宽度、padding实现隐藏的方案，改用transform: translateX()将容器整体移出视口。这种方式不会改变容器本身的尺寸，从根源避免内部元素挤压、滚动条闪烁等问题，同时动画由GPU加速，流畅度更高。

具体实现步骤 #

1. 调整基础布局结构

确保两个容器处于同一个带溢出隐藏的父容器内，维持初始的50%分栏布局：

<div class="app-wrapper">
  <button class="fullscreen-toggle">切换全屏</button>
  <div class="editor-container">编辑器内容</div>
  <div class="input-output-container">输入输出内容</div>
</div>

2. 重写CSS动画逻辑

• 父容器设置overflow: hidden，防止滑出的容器显示在视口外
• 编辑器保留宽度过渡逻辑，实现占满全屏的效果
• 输入输出容器通过transform控制位置，替代宽度/ padding修改：

.app-wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 关键：隐藏滑出视口的容器 */
}

.editor-container {
  width: 50%;
  height: 100%;
  transition: width 0.3s ease;
  /* 编辑器自身样式 */
  background: #f5f5f5;
  padding: 1rem;
}

.editor-container.full-width {
  width: 100%;
}

.input-output-container {
  width: 50%;
  height: 100%;
  transform: translateX(0);
  transition: transform 0.3s ease;
  /* 输入输出容器自身样式，padding等无需清零 */
  background: #fff;
  padding: 1rem;
  border-left: 1px solid #eee;
}

.input-output-container.hide {
  transform: translateX(100%); /* 向右滑出整个视口 */
}

3. 保持原有JS切换逻辑

无需修改太多，依然通过切换类名触发状态变化：

const toggleBtn = document.querySelector('.fullscreen-toggle');
const editor = document.querySelector('.editor-container');
const inputOutput = document.querySelector('.input-output-container');

toggleBtn.addEventListener('click', () => {
  editor.classList.toggle('full-width');
  inputOutput.classList.toggle('hide');
});

额外优化建议 #

如果需要更自然的视觉过渡，可以在hide类中添加透明度变化：

.input-output-container.hide {
  transform: translateX(100%);
  opacity: 0;
}

.input-output-container {
  /* 调整过渡属性，同时包含透明度 */
  transition: transform 0.3s ease, opacity 0.2s ease 0.1s;
}

这里给透明度动画添加了0.1s延迟，让滑出动作先启动再淡出，视觉层级更清晰。

内容的提问来源于stack exchange，提问作者Sai Darshan