交换按钮动画 – 彬少「Binshao」

效果预览

两个按钮点击后交换位置，并带有平滑的过渡动画。这个交互常用于双栏选择、对比功能等场景。

HTML 结构

<div class="swap-container">
  <button class="swap-btn left">选项 A</button>
  <button class="swap-btn right">选项 B</button>
</div>
<button onclick="swap()">交换</button>

CSS 动画实现

使用 CSS Grid 布局 + transition 实现平滑的位置互换：

.swap-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: relative;
}

.swap-btn {
  padding: 12px 24px;
  border: 2px solid #333;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.swap-btn.swapped.left {
  grid-column: 2;
}

.swap-btn.swapped.right {
  grid-column: 1;
}

JavaScript 逻辑

function swap() {
  const left = document.querySelector('.left')
  const right = document.querySelector('.right')
  left.classList.toggle('swapped')
  right.classList.toggle('swapped')
}

关键要点

使用 cubic-bezier 曲线让动画带有弹性效果，交互感更强
通过 grid-column 切换实现位置互换，无需计算绝对定位
transition: all 配合特定的贝塞尔曲线，按钮交换时有「弹」的感觉

更多思路

除了左右交换，你还可以尝试：

上下交换 — 使用 grid-row 替代 grid-column
三按钮循环 — 三个按钮轮换位置
带图标交换 — 按钮内包含图标，交换时图标跟随位移

带图标的版本

<button class="swap-btn">
  <span class="icon">🌞</span>
  <span class="label">日间模式</span>
</button>
<button class="swap-btn">
  <span class="icon">🌙</span>
  <span class="label">夜间模式</span>
</button>

这种交互方式特别适合主题切换、布局切换等场景，用起来有趣又直观。