transition首屏闪现是因为初始样式未在html渲染前就位，必须将transition写在默认class中而非触发态，避免display切换，用visibility替代，并确保元素有固定尺寸。

为什么transition会在首屏闪一下

不是transition本身有问题，而是它依赖的样式状态在HTML渲染完成前还没就位。比如用opacity做淡入，但初始opacity: 0是靠JS在useEffect里加的——浏览器先画出没过渡、全透明的空白块，等JS执行完才补上transition和opacity: 1，中间这几十毫秒就是闪屏。

transition必须写在初始class里，不能只写在激活态

常见错误是把transition类（如transition-opacity）只加在.active或.show这类触发态上。浏览器首次渲染时没这个类，opacity变化直接跳变，不走过渡。

Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载

• ✅ 正确：div { @apply opacity-0 transition-opacity duration-300; }，然后用opacity-100切换
• ❌ 错误：div { @apply opacity-0; }，div.show { @apply opacity-100 transition-opacity duration-300; }
• 如果用Tailwind，确保transition-opacity出现在默认class列表中，而不是仅靠条件渲染添加

避免display切换干扰opacity过渡

display: none会强制中断所有CSS动画，哪怕你同时设了opacity和transition。页面可能先黑一下、再淡入，或者干脆跳变。

• 用visibility: hidden替代display: none，它不触发重排，且能和opacity共存
• 如果必须释放空间，等transitionend事件触发后再设display: none
• 确认元素有固定尺寸（比如h-48或min-h-[200px]），否则内容消失后布局塌缩也会造成视觉抖动

Next.js服务端渲染时transition怎么“预生效”

SSR生成的HTML里，如果初始状态是隐藏的（opacity-0），但JS还没加载，用户会看到空白；如果初始是显示的（opacity-100），又没法做淡入。关键是在服务端就决定好“是否启用过渡”。

• 对纯客户端交互的过渡（比如按钮点击展开），用两个state：一个管可见性（从cookie或localStorage读），一个管是否启用transition（初始false，点击后设true）
• 不要在useEffect里同步改className，改用requestAnimationFrame延迟一帧，让浏览器先完成初始渲染
• 如果用了next-themes，确保data-theme属性在app/layout.tsx的里就写入，否则主题相关的transition（比如bg-white→bg-gray-900）也会闪

真正难的是判断“这里到底该不该动”。很多闪屏问题，删掉那行transition比修它更省事。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！