应显式声明 transition: opacity 0.2s ease, transform 0.2s ease；用 transform 替代 top/left；确保起始状态含 opacity: 0 和 transform 偏移；插入 DOM 后需强制重排或 requestAnimationFrame 再加显示类；iOS 需加 will-change: opacity, transform；focus 宜延迟至动画稳定后。

transition 该写哪些 CSS 属性才让渐显和位移同步生效

只写 transition: all 看似省事，但实际会导致意料外的延迟或卡顿——因为 all 会监听所有可动画属性，包括 height、overflow 这类触发重排的属性，浏览器可能放弃硬件加速，甚至在某些旧版 Safari 中直接跳过动画。

真正要同步控制「透明度变化 + 位置移动」，必须显式声明两个核心属性：

• transition: opacity 0.2s ease, transform 0.2s ease
• transform 用 translateY() 或 translateX()，别用 top/left——后者触发布局重排，无法与 opacity 同步流畅执行
• 确保起始状态有明确的 opacity: 0 和 transform: translateY(10px)（或其他偏移值），否则过渡无从开始

评论框 DOM 插入后 transition 不触发的常见原因

刚用 JS 动态插入一个带 reply-box 类的 <div>，即使加了 class 和 transition 声明，第一次显示时仍“啪”一下弹出来，没有过渡效果——这是典型的「样式未及时计算」问题。 <ul> <li>JS 插入元素后立刻加显示 class（如 <code>is-visible），但浏览器还没完成样式计算，transition 没捕获到初始状态

解决办法：插入后强制触发一次重排，再加 class。例如：

el.appendChild(box);
// 强制重排
void box.offsetHeight;
box.classList.add('is-visible');

或者改用 requestAnimationFrame 延迟到下一帧：

el.appendChild(box);
requestAnimationFrame(() => {
  box.classList.add('is-visible');
});

opacity + transform 组合在 iOS Safari 的兼容细节

iOS 15.4 之前，Safari 对 opacity 和 transform 同时过渡的支持不稳定，尤其在键盘弹出/收起时容易中断动画或残留半透明残影。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

• 必须给过渡容器加 will-change: opacity, transform，否则 iOS WebKit 可能不启用合成层
• 避免在 transition 过程中动态修改 pointer-events 或 visibility，这两者会打断硬件加速上下文
• 如果评论框内含 textarea，iOS 下 focus 时自动缩放页面可能导致 transform 错位，建议加 transform-origin: top left 锚定起点

如何让「回复框出现」和「光标自动聚焦」不互相干扰

调用 textarea.focus() 会强制键盘弹出，在部分安卓机型上会触发窗口 resize，进而重置 transform 值，导致位移动画被截断。

• 不要在 transition 开始前就 focus；等 transition 完全进入稳定态（即 opacity=1 且 transform 到位）再 focus
• 监听 transitionend 事件，但注意它可能因 opacity 和 transform 分别结束而触发两次——用 event.propertyName === 'opacity' 过滤
• 更稳妥的做法：用 setTimeout 延迟 250ms 再 focus，比依赖事件更可控（iOS 下 transitionend 有时根本不会触发）

CSS 过渡不是设了就完事，关键在于「初始状态是否真实存在」「浏览器是否决定用 GPU 渲染」「JS 时机是否和渲染管线对齐」——这三个点漏掉任何一个，动画就容易掉帧或干脆不走。