直接给 display 加 transition 无效，因 display 是离散属性；应改用 opacity + visibility 或 transform 组合实现过渡，并通过 class 切换控制状态，避免 JS 直接操作 display。
用 CSS transition 控制登录框显隐的过渡
直接给 display 加 transition 是无效的——这是最常踩的坑。因为 display 是离散属性（none / block 之间没有中间状态），浏览器无法插值动画。
正确做法是改用 opacity + visibility 或 transform 组合：
-
opacity: 0→opacity: 1控制淡入淡出 -
visibility: hidden→visibility: visible配合控制是否响应事件（比如点击穿透） -
transform: scale(0.95) translateY(-10px)→transform: scale(1) translateY(0)做轻微缩放+位移，观感更自然
记得把 transition 写在登录框元素本身上，且需包含所有参与变化的属性，例如：
transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
JavaScript 触发时要避开 display 切换
如果用 JS 控制显示/隐藏，别写 element.style.display = 'block' 或 'none'，否则会强制中断过渡、闪一下。
立即学习“前端免费学习笔记（深入）”；
推荐用 class 切换 + CSS 控制状态：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 初始状态：登录框有
login-modal类，含基础样式和transition - 隐藏态加
login-modal--hidden类，设opacity: 0、visibility: hidden、pointer-events: none - JS 只做
element.classList.toggle('login-modal--hidden')
这样浏览器能全程走 CSS 过渡，不触发重排。
modal 背景遮罩也要过渡，否则割裂
遮罩层（overlay）如果突然出现，会破坏整体动效节奏。它同样不能靠 display 切换。
建议统一处理：
- 遮罩层默认
opacity: 0、visibility: hidden - 和登录框共用同一组过渡时间与缓动函数，保持同步感
- 注意 z-index 层级：遮罩必须在登录框之下，但又要在内容之上；常见错误是遮罩
z-index比登录框低，导致点不到关闭按钮
移动端要注意 pointer-events 和 focus 状态
过渡过程中用户可能快速点击关闭按钮，但若 opacity 已降到很低、visibility 却还没切到 hidden，就可能出现“点到了却没反应”的情况。
稳妥做法是：
- 在过渡开始前就设置
pointer-events: none（针对隐藏操作），或在过渡结束后才启用（针对显示操作） - 登录框
show后，用element.focus()把焦点移到第一个输入框，否则键盘不会自动弹出 - 避免在
transitionend里做复杂逻辑，iOS Safari 对该事件触发有时序 bug，优先用 CSS class 控制状态而非依赖 JS 回调
真正难的不是写几行 transition，而是让显隐过程不卡、不闪、不误触，且在各种设备上表现一致。这些细节一漏，动效就变 bug。
