CSS过渡需在默认状态写transition属性，指定可动画属性、时长和缓动函数；下拉菜单用max-height或transform替代height；滚动变色需JS监听scroll切换class；失效主因是属性不可过渡、transition位置错误或重绘阻塞。
导航栏悬停时如何触发CSS过渡
HTML本身不处理动画，过渡效果必须靠CSS的transition属性驱动。关键在于：给导航项（如<a>或<li>）设置可变化的样式属性（比如color、background-color、transform），再用:hover定义目标状态，并声明哪些属性需要过渡、持续多久、用什么缓动函数。
常见错误是只写了:hover样式却漏掉transition，或者把transition写在:hover里（无效）。它必须写在默认状态上。
- 正确写法：
a { color: #333; transition: color 0.3s ease; } a:hover { color: #007bff; } - 支持过渡的属性有限，
display、height（从0到auto）等无法直接过渡，需改用max-height或opacity+visibility - 移动端要注意
:hover在触摸设备上可能不触发，建议同时加:focus或用JavaScript监听touchstart
下拉菜单展开时怎么加过渡
纯CSS下拉菜单常依赖:hover显示子菜单，但height: 0 → auto无法过渡。解决方案是避开height，改用max-height配合overflow: hidden。
示例结构：<li class="dropdown"><a href="#">产品</a><ul class="dropdown-menu"><li><a href="#">Web</a></li></ul></li>
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
.dropdown-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; }-
.dropdown:hover .dropdown-menu { max-height: 200px; opacity: 1; }（200px需略大于实际内容高度） - 更稳妥的做法是用
transform: scaleY(0) → scaleY(1)+opacity，性能更好且无需估算高度
固定定位导航栏滚动时如何平滑变色
这种效果需要JavaScript监听scroll事件，动态切换class，再由CSS完成过渡。不能只靠CSS，因为滚动位置是运行时状态。
- 给
<nav>加初始class如nav-transparent，并设置background-color: rgba(255,255,255,0) - JS中监听
window.addEventListener('scroll', () => { if (window.scrollY > 50) nav.classList.add('scrolled'); else nav.classList.remove('scrolled'); }) - CSS里写
.nav-transparent { transition: background-color 0.4s ease; } .nav-transparent.scrolled { background-color: rgba(255,255,255,0.95); } - 注意避免在
scroll回调里直接操作样式（强制重排），务必用class切换
transition失效的三个高频原因
过渡没反应？大概率卡在这几个点上：
- 目标属性不可过渡：比如
display: none ↔ block、font-size从1rem到calc(1rem + 2px)（单位混用）、margin从auto开始 - 过渡写在了伪类里：
a:hover { transition: color 0.2s; }是错的，必须写在常态选择器上 - 浏览器强制重绘被阻塞：比如在
transition期间又快速触发了其他样式变更，或用了position: absolute但父容器没设transform: translateZ(0)导致GPU加速未启用
过渡不是“自动魔法”，它是CSS对两个明确状态之间变化的插值计算。状态得可测量、可比较、可动画化——否则就只是瞬间切换。
