Safari 17.4+仍不支持display过渡，因其为离散属性无中间状态；应改用opacity+visibility组合，并在transitionend中设display:none释放布局空间。
不能过渡。 Safari 17.4+（包括所有现代浏览器）依然不支持对 display 做 CSS transition，这不是 Safari 的 bug 或版本限制，而是 CSS 规范和渲染引擎的底层约束：display 是离散属性，没有中间状态，浏览器直接跳过 transition 计算——你加了 transition: display 0.3s，DevTools 的 Computed 面板里根本找不到这条规则。
为什么 Safari 17.4+ 仍不支持 display 过渡
即便 Safari 已支持 view-transition 等新特性，display 的不可插值性仍未改变。它不像 opacity（0→1 可线性插值）或 transform（矩阵可分解），none 和 block 之间不存在数学映射关系。Safari 渲染引擎（WebKit）和其他浏览器一样，静默忽略该声明，不报错、不警告、也不触发 transitionend。
替代方案必须用 opacity + visibility 组合
这是 Safari 17.4+ 中唯一稳定、无需前缀、兼容 iOS/iPadOS 的方案，但要注意 Safari 对 visibility 过渡的处理更严格：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
visibility本身不可插值，但 Safari 支持transition: visibility 0.3s step-end，确保它只在opacity动画最后一帧切换，避免半透明时仍可点击 - 必须显式写
transition: opacity 0.3s ease, visibility 0.3s step-end；transition: all在 Safari 中不会自动包含visibility - 初始状态需同时设
opacity: 0和visibility: hidden，否则入场时可能闪一下或焦点穿透 - 记得加
pointer-events: none（隐藏态）和pointer-events: auto（显示态），Safari 对 pointer-events 的继承行为比 Chrome 更保守
需要真正释放布局空间？transitionend 里再设 display:none
Safari 下，若元素隐藏后必须腾出高度（比如折叠菜单、弹窗收起），不能在动画中直接改 display，否则过渡中断：
立即学习“前端免费学习笔记（深入）”；
- 监听
transitionend事件，且只在event.propertyName === 'opacity'时执行清理 - 此时再设
element.style.display = 'none'和element.setAttribute('aria-hidden', 'true') - 如果该元素曾获得焦点，同步调用
element.blur()，否则 Safari 的 VoiceOver 可能卡在已隐藏的节点上 - 不要用
setTimeout估算时间——Safari 的 transition 实际耗时可能因 GPU 调度略有浮动
真正容易被忽略的是：即使 CSS 写对了，只要 JS 里有一行 el.style.display = 'none' 提前执行，整个过渡就归零。Safari 不会“回滚”或警告，它只是默默跳过动画，然后你看到的就是突变。
