移动端滑动切换必须用 transform，禁用 left/margin；页面容器用 flex 布局配合 translateX(-N%) 切换，transition 写在默认状态，时长≤0.35s、缓动用 ease-out；老旧安卓需能力检测降级动画；避免混用 transition 与 animation。
移动端滑动切换必须用 transform，别碰 left/margin
用 left 或 margin-left 做页面位移，在 iOS Safari 和多数安卓 WebView 里会强制触发重排（reflow），滑动一卡一卡的，连点两下就偏移错位。真实项目里只要出现“滑动闪一下”“松手后回弹异常”，八成是用了非合成属性。
正确做法是把所有页面容器包进一个 .pages，设 display: flex，每个子页 flex: 0 0 100%，再用 transform: translateX(-N%) 切换 —— N 是当前页索引（0 或 1），只取两个确定值，不累加计算。
-
.pages { transform: translateX(0%); }→ 显示第一页（如 Morning） -
.pages.active-evening { transform: translateX(-100%); }→ 显示第二页（如 Evening） - 过渡写在默认状态：
.pages { transition: transform 0.35s ease-out; }，不是只写在激活类里
动画时长和缓动必须按设备区分
桌面端能撑住 0.5s + cubic-bezier(0.25, 0.46, 0.45, 0.94)，但移动端手指操作节奏快，动画超过 0.35s 就显得拖沓；用复杂缓动还可能在低端安卓上掉帧。
- 移动端统一用
ease-out，时长 ≤ 0.35s - 桌面端可用更长时长（0.4–0.5s）和精细缓动
- 媒体查询只作用于元素本身，比如：
@media (max-width: 768px) { .pages { transition-duration: 0.3s; } }，别套在@keyframes外面——那没用
老旧安卓机要主动降级，不能只靠媒体查询
部分 Android 4.4–5.1 系统 WebView 对 transform + opacity 组合动画支持差，容易闪屏或卡死。光靠 @media (max-width: 480px) 识别“移动端”不够，得结合能力检测。
立即学习“前端免费学习笔记（深入）”；
- 优先加
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } } - JS 中用
matchMedia('(resolution: 1dppx)').matches+ UA 判断是否为老旧安卓，然后给<html>加class="no-animation" - CSS 中用
.no-animation .pages { transition: none; transform: translateX(-100%); }强制跳过动画
transition 比 animation 更适合页面级切换
页面滑动是“状态切换”：当前显示 A 还是 B？不是“时间轴驱动”的多阶段动效。用 @keyframes 写两套动画再靠 JS 切类名，反而容易冲突、难同步、不好 debug。
- 用
transition+ class 控制，逻辑干净：A 页显、B 页隐 → 改类 → 浏览器自动补间 - 避免混用
animation和transition控制同一元素的transform，浏览器渲染层会打架 - 如果要做入场顺序（比如标题先滑入、图片后滑入），用
animation-delay配合多个子元素，别让整个页面容器自己做“分段动画”
真正麻烦的是边界控制和状态同步——比如用户快速连点两次“切换”，transform 值还没结束就又改，容易卡在 -50% 这种非法位置。这类问题没法靠 CSS 单独解决，必须由 JS 锁定状态、防抖、并确保每次只在两个合法值（0% / -100%）之间切换。
