如何制作支持左右滑动平滑过渡的双向动画照片轮播器？

本文共计933个文字，预计阅读时间需要4分钟。

原文：

在构建现代 Web 轮播组件时，仅支持单向动画（如始终从右向左切换）会显著降低交互真实感——用户点击「上一张」时，内容却仍向右滑出，违背直觉。本文提供一套轻量、无依赖、语义清晰的双向动画解决方案，核心在于将动画方向解耦为运行时可控的状态，而非硬编码在 CSS 中。

✅ 核心思路：用 CSS 变量驱动动画方向

我们引入一个 CSS 自定义属性 --direction（默认值为 1），并在关键帧中使用 calc(var(--direction) * 100%) 动态计算位移量：

@keyframes show { 0% { transform: translateX(calc(var(--direction) * 100%)); /* 进场：根据方向决定起始位置 */ } 100% { transform: translateX(0); } } @keyframes hide { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(calc(-1 * var(--direction) * 100%)); /* 退场：反向退出 */ } }

这样，当 --direction: 1 时，show 从 100% → 0（右→左入场），hide 从 0 → -100%（左→右退场）；当 --direction: -1 时，show 从 -100% → 0（左→右入场），hide 从 0 → 100%（右→左退场）——完美匹配用户操作意图。