align-items 动画不平滑是因为它不触发 GPU 加速，每次变化都引发 layout→paint→composite 全流程；而 transform（如 translateY）可硬件加速，提升为独立图层，实现 60fps 平滑动画。
align-items 动画为什么不平滑
align-items 是 Flex 容器的布局属性，它控制的是子项在交叉轴上的对齐方式（比如 center、flex-start），本身不触发浏览器的合成层（compositor layer），也不属于 CSS 动画加速属性。浏览器无法对其做 GPU 加速，每次变化都要触发 layout → paint → composite 全流程，帧率容易掉，尤其在中低端设备上会明显卡顿。
为什么 transform 位移能平滑动画
transform（尤其是 translateY() 这类位移）是浏览器明确支持硬件加速的属性。只要不伴随影响布局的其他变更（如 width、height、top/left），现代浏览器会将其提升为独立图层，交由 GPU 渲染，动画基本稳定在 60fps。
- 只用
transform: translateY()模拟垂直居中效果，避免修改align-items - 确保目标元素有
will-change: transform（可选，对长时动画有帮助） - 不要和
position: absolute+top混用——这会退回到 layout 触发路径
如何用 transform 替代 align-items: center 实现垂直居中动画
假设你有一个 Flex 容器 .container，里面一个子元素 .item 需要从顶部“滑入居中”，原写法可能是：
.container {
display: flex;
align-items: flex-start;
}
.item { transition: all 0.3s ease; }
.container.active .item { align-items: center; } /* ❌ 无效：align-items 不能作用于子元素 */
正确做法是把居中逻辑移到子元素自身，用 transform 计算偏移量：
立即学习“前端免费学习笔记（深入）”；
.item {
transition: transform 0.3s ease;
}
.container.active .item {
transform: translateY(calc(50vh - 50%)); /* 基于视口+自身高度动态居中 */
}
更稳妥的做法是用 JS 获取容器高度后设置偏移（尤其当容器高度不固定时）：
const item = document.querySelector('.item');
const container = document.querySelector('.container');
const offset = (container.offsetHeight - item.offsetHeight) / 2;
item.style.transform = `translateY(${offset}px)`;
容易忽略的兼容性与性能细节
某些旧版 Safari（iOS 13.3 之前）对 calc() 在 transform 中的支持不稳定，直接写 translateY(calc(50vh - 50%)) 可能失效或跳变。
- 优先用 JS 动态计算并设内联
transform，避开 CSS calc 边界问题 - 避免在动画中频繁读取
offsetHeight—— 触发强制同步布局（forced reflow），可用getBoundingClientRect()缓存或节流 - 如果容器高度随内容动态变化（如展开折叠），记得在尺寸变更后重新计算并重置
transform
真正卡顿的从来不是“要不要用 transform”，而是没意识到 align-items 根本不能加在子元素上，也压根不是可动画属性——这个误解比写法本身更常导致白忙活。
