三栏布局切换时添加滑动动画的技术实现咨询

要给你的三栏布局添加平滑的滑动过渡动画，完全不需要用jQuery，直接通过CSS的transition属性就能实现，而且性能更好、代码更简洁。

修改方案 #

核心是给三个面板添加过渡属性，让宽度变化时自动触发平滑动画：

1. 在三个面板的基础CSS样式中加入transition: width 0.3s ease;，其中0.3s是动画时长（可根据需求调整，比如0.5s），ease是缓动曲线（控制动画的快慢节奏）。
2. 原有的JavaScript类切换逻辑保持不变，CSS会自动处理属性变化的过渡效果。

修改后的完整代码 #

HTML

<div class="container">
  <div class="left-pane" id="leftpane">
    Left Pane Content
  </div>
  <div class="center-pane" id="centerpane">
    Center Pane Content
  </div>
  <div class="right-pane" id="rightpane">
    Right Pane Content
  </div>
</div>

CSS

.container {
  background-color: lightblue;
  font-family: sans-serif;
  font-size: 1.1em;
}

.left-pane,
.center-pane,
.right-pane {
  padding-block-start: 10vh;
  display: inline-block;
  outline: dotted 2px #333;
  height: 95vh;
  text-align: center;
  /* 添加过渡属性，实现平滑滑动动画 */
  transition: width 0.3s ease;
}

.left-pane {
  width: 25vw;
  background-color: yellow;
}

.center-pane {
  width: 40vw;
}

.right-pane {
  width: 33vw;
  background-color: aquamarine;
}

.left-pane.mode-2 {
  width: 10vw;
}

.center-pane.mode-2 {
  width: 47vw;
}

.right-pane.mode-2 {
  width: 40vw;
}

JavaScript（优化版）

const leftPane = document.getElementById('leftpane');
const centerPane = document.getElementById('centerpane');
const rightPane = document.getElementById('rightpane');

// 简化类切换逻辑
const toggleMode2 = (add) => {
  const method = add ? 'add' : 'remove';
  [leftPane, centerPane, rightPane].forEach(pane => pane.classList[method]('mode-2'));
}

leftPane.addEventListener('mouseover', () => toggleMode2(false));
centerPane.addEventListener('mouseover', () => toggleMode2(true));
rightPane.addEventListener('mouseover', () => toggleMode2(true));

方案说明 #

• CSS过渡是浏览器原生支持的动画方案，相比JS/jQuery动画，它的性能更优（浏览器会做硬件加速优化），且不需要额外依赖。
• 如果需要调整动画的速度或节奏，可以修改transition的参数：比如把0.3s改成0.6s让动画更平缓，或者把ease换成linear实现匀速动画。
• 原有的交互逻辑完全保留，只需要添加一行CSS属性就能实现滑动效果，改动极小且易于维护。

内容的提问来源于stack exchange，提问作者Glenn Ferrie