css过渡需在默认状态写transition属性，指定可动画属性、时长和缓动函数；下拉菜单用max-height或transform替代height；滚动变色需js监听scroll切换class；失效主因是属性不可过渡、transition位置错误或重绘阻塞。
导航栏悬停时如何触发CSS过渡
HTML本身不处理动画，过渡效果必须靠CSS的transition属性驱动。关键在于：给导航项（如@#@#@#@#@#@#@#@#@#@0<ul class="dropdown-menu"><li>@#@#@#@#@#@#@#@#@#@1</li></ul>
.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，因为滚动位置是运行时状态。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给
<nav></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对两个明确状态之间变化的插值计算。状态得可测量、可比较、可动画化——否则就只是瞬间切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
