使用CSS transition结合transform和opacity可实现图片画廊的流畅切换，避免重排重绘，提升用户体验。
图片画廊的流畅切换能显著提升用户体验，而 CSS transition 是实现平滑动画效果的关键工具。通过合理使用 transition，可以避免生硬跳转，让图片切换更自然。
使用 transform 和 opacity 实现高效过渡
在切换图片时，推荐使用 transform 和 opacity 属性进行动画，因为它们由 GPU 加速，性能更好，不会触发重排或重绘。
- 用
transform: translateX()控制图片水平位移 - 用
opacity实现淡入淡出效果 - 这些属性不会影响布局，动画更流畅
.gallery-image {
position: absolute;
opacity: 0;
transform: translateX(100%);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.gallery-image.active {
opacity: 1;
transform: translateX(0);
}
设置合适的缓动函数（easing）
默认的 ease 可能显得呆板，选择更自然的缓动函数能让动画更有“呼吸感”。
-
ease-in-out：适合淡入淡出，两端慢中间快 -
cubic-bezier(0.25, 0.46, 0.45, 0.94)：类似滑入效果，手感更细腻 - 避免使用
linear，会显得机械
避免频繁重排，保持动画流畅
某些属性如 width、height、top、left 触发 layout，容易造成卡顿。
立即学习“前端免费学习笔记（深入）”；
- 尽量用
transform替代left/right位移 - 确保图片容器尺寸固定，防止切换时页面抖动
- 提前设置
will-change: transform, opacity可提示浏览器优化
基本上就这些。合理运用 transition 配合 transform 和 opacity，既能实现视觉吸引力强的切换效果，又能保证在各种设备上运行流畅。关键在于减少性能开销，让动画真正服务于体验。不复杂但容易忽略。
