如何在HTML页面中设置隐藏显示过渡效果-html教程-PHP中文网

display不支持过渡动画，因其为离散值；应改用opacity+visibility+transform组合或max-height模拟高度动画，并在动画结束后再设display:none。

如何在html页面中设置隐藏显示过渡效果

直接用 display: none 切换元素，过渡动画必然失效——这不是你写错了，而是 CSS 根本不支持对 display 做插值计算。

浏览器只能对「可动画化属性」生成中间帧，比如 opacity、transform、max-height；而 display 是离散值（block/none/flex…），没有中间状态，transition 一碰到它就静默放弃。

常见错误：写了 transition: opacity 0.3s，却用 element.style.display = "none" 隐藏——opacity 根本没机会变到 0，元素已从渲染树中被剔除
更隐蔽的坑：Vue 的 v-if 或 React 的条件渲染，底层也是删/插 DOM 节点，不配 <transition></transition> 或 CSSTransition 就不可能有入场动画
检查方法：在 DevTools 中 hover 元素，看 computed 样式里 transition 是否始终存在；如果切换类后它消失了，动画一定断掉

这是最轻量、兼容性最好、也最可控的组合。三者分工明确：opacity 控制透明度，visibility 保证事件可穿透（或不可穿透），transform 处理位移，全部可动画且不触发重排。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

基础样式必须包含完整 transition 声明：.fade { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.25s ease, transform 0.25s ease; }
隐藏态写成：.fade--hidden { opacity: 0; visibility: hidden; transform: translateY(-10px); }（注意：不能只写 visibility: hidden，它本身不可动画）
JS 控制时，先加 --hidden 类，等 transitionend 事件触发后再设 display: none（仅当真需要释放布局空间时才这么做）

想让一个折叠面板展开时有高度动画？别碰 height: auto——auto 不是数值，transition 直接忽略。唯一可行路径是用 max-height 占位。

在 Vue 或 React 中，手动改 ref.style.display 看似快，实则破坏过渡机制：v-show 不会触发 transition 类名更新，CSSTransition 的 enter/exit 阶段也不会启动。

Vue：用 <transition name="fade"><div v-if="show">...</div></transition>，并配好 .fade-enter-active 等类
React：用 CSSTransition 包裹，确保 in 属性由 state 控制，不要在 onEnter 回调里直接设 display
共同原则：动画控制权交给框架的过渡组件，JS 只管开关布尔值

真正麻烦的从来不是怎么写动画，而是什么时候该让元素彻底离开文档流——display: none 是释放空间的最终手段，但必须等所有可动画属性完成过渡后，再通过事件或定时器去执行，否则永远卡在“半隐半现”状态。