transition必须写在基础类中，否则属性变化无过渡效果；background-color需用class切换，height过渡应改用max-height或transform；全屏动画需重置html/body的margin和min-height。
transition 必须写在基础类里，不能只写在目标类中
浏览器只会在元素已有 transition 声明的前提下，才对后续的属性变化做过渡处理。如果只在 .active 里写 transition: opacity 0.3s，那从默认状态切到 .active 时，transition 还没“上岗”，直接跳变。
正确做法是把 transition 放在基础选择器上，比如：
.menu-btn {
opacity: 0.6;
transition: opacity 0.2s ease, transform 0.25s ease;
}
.menu-btn.active {
opacity: 1;
transform: scale(1.05);
}
这样无论加还是删 .active，浏览器都始终监听着这些属性的变化。
用 classList.toggle() 切换最安全，但别在同步代码里反复操作
直接 el.classList.add('show'); el.classList.remove('show'); 连写，浏览器来不及触发重绘，动画会被跳过——它看到的是“加完立刻删”，中间没有可过渡的状态差。
常见可靠写法：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 用
el.classList.toggle('show')单次调用，语义清晰、时机可控 - 需要延迟移除（比如“闪一下”）：用
setTimeout(() => el.classList.remove('show'), 10) - 避免在事件回调里重复添加同一类名，先
el.classList.contains('show')判断
background-color 和 height 切换要特别小心
background-color 支持 transition，但必须通过 class 切换，不能用 el.style.backgroundColor = 'red' —— 这种内联赋值会绕过 transition 链。
height 从 0 到 auto 不支持过渡，浏览器无法计算终点值。替代方案：
- 用
max-height（设一个足够大的固定值，如max-height: 500px），配合overflow: hidden - 优先用
transform: scaleY(0)→transform: scaleY(1)，硬件加速且稳定 - 配合
opacity实现更自然的淡入+缩放组合效果
全屏背景或 body 动画容易漏掉布局前提
想让 body 的 background-color 过渡铺满整个视口？光写 transition 不够。常见失效原因：
-
html和body没设min-height: 100vh，内容短时背景只占内容高 -
body默认有margin: 8px，导致背景色边缘露白 - 滚动条宽度被计入视口，
100vw在有滚动条时略小于实际宽度
稳妥写法：
html, body {
margin: 0;
min-height: 100vh;
}
body {
transition: background-color 1.2s ease;
}
真正难的不是写 transition，而是确保初始渲染时样式已就位、DOM 结构可预测、且所有依赖条件（高度、溢出、单位）都提前对齐。稍有遗漏，动画就卡在“该动没动”或“动一半就断”。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
