使用opacity与transition实现渐隐渐显效果，通过设置透明度变化及过渡动画提升用户体验。例如.hover触发时opacity从0到1平滑过渡，适用于遮罩层、模态框等场景，注意避免重排并优化性能。
要实现元素的渐隐渐显效果，CSS 中的 transition 与 opacity 结合使用是最常用且高效的方法。通过控制透明度的变化，并添加过渡动画，可以让元素在显示和隐藏之间平滑切换，提升用户体验。
opacity 控制透明度
opacity 属性用于设置元素的透明程度，取值范围是 0 到 1：
• 0 表示完全透明（看不见）• 1 表示完全不透明（完全可见）
• 0.5 表示半透明
与 display: none 不同，opacity: 0 的元素虽然看不见，但仍占据文档流，可以响应事件（除非配合 pointer-events: none 使用）。
transition 实现平滑过渡
transition 属性定义了 CSS 属性变化时的过渡效果。结合 opacity 使用时，可以设置透明度变化的持续时间、缓动函数等。
立即学习“前端免费学习笔记（深入）”；
• transition: opacity 0.5s ease;• 可细化为 transition-property, transition-duration, transition-timing-function, transition-delay
例如，当鼠标悬停时让一个图层淡入：
.box {
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.box:hover {
opacity: 1;
}
实际应用场景示例
常见用途包括：图片悬停显示文字、模态框淡入、导航菜单渐显等。
以“悬停显示遮罩层”为例：
.card {
position: relative;
width: 300px;
height: 200px;
background: url('image.jpg') no-repeat center;
}
.overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.7);
color: white;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.card:hover .overlay {
opacity: 1;
}
这样，鼠标移入卡片时，黑色遮罩和文字会平滑浮现，移出时逐渐消失。
注意事项与优化建议
使用 opacity + transition 时需注意以下几点：
• 避免频繁触发重排（reflow），opacity 和 transform 是性能较好的动画属性• 若需彻底隐藏元素并释放空间，可结合 visibility 或 display 使用（但 display 不支持过渡）
• 可添加 will-change: opacity 提升动画性能
• 移动端注意避免长时间动画影响操作流畅性
基本上就这些。opacity 搭配 transition 实现渐变效果简单直观，是前端动效的基础技能之一。合理运用能让界面更自然生动。
