transition: opacity .2s linear; 详细讲解
一、含义
transition: opacity .2s linear; 是一个 CSS 过渡属性，它的意思是：当元素的 opacity（透明度）属性发生变化时，用 0.2 秒的时间以线性速度平滑地完成这个变化。
二、词源
| 单词 | 含义 |
|---|---|
| transition | 过渡、转变 |
| opacity | 不透明度 |
| .2s | 0.2 秒（200 毫秒） |
| linear | 线性的、匀速的 |
三、语法分解
css
transition: [属性名] [持续时间] [速度曲线];
本句分解：
opacity：只监控透明度属性的变化.2s：过渡持续 0.2 秒linear：匀速变化（全程速度不变）
四、效果对比
没有 transition（瞬间变化）
css
.element {
opacity: 1;}.element:hover {
opacity: 0; /* 鼠标放上瞬间变透明 */}效果：元素瞬间从可见变成不可见（生硬、突兀）
有 transition（平滑过渡）
css
.element {
opacity: 1;
transition: opacity .2s linear;}.element:hover {
opacity: 0; /* 鼠标放上0.2秒内慢慢变透明 */}效果：元素在 0.2 秒内平滑地淡出（流畅、自然）
五、可视化理解
text
时间轴（0.2秒 = 200毫秒） 0ms 100ms 200ms ↓ ↓ ↓ ┌─────────────────┬─────────────────┬─────────────────┐ │ │ │ │ │ opacity: 1 │ opacity: 0.5 │ opacity: 0 │ │ (完全不透明) │ (半透明) │ (完全透明) │ │ │ │ │ └─────────────────┴─────────────────┴─────────────────┘ 线性速度：每一步变化量相同 没有 transition： 0ms 200ms ↓ ↓ ┌─────────────────┬─────────────────┐ │ │ │ │ opacity: 1 │ opacity: 0 │ │ (完全不透明) │ (完全透明) │ │ │ │ └─────────────────┴─────────────────┘ 瞬间跳转，没有中间过程
六、速度曲线详解
| 值 | 速度变化 | 效果 |
|---|---|---|
linear | 全程匀速 | 机械、平稳 |
ease | 慢→快→慢（默认） | 自然、柔和 |
ease-in | 慢→快 | 缓慢启动 |
ease-out | 快→慢 | 缓慢停止 |
ease-in-out | 慢→快→慢 | 两头慢中间快 |
视觉对比
text
linear: 速度 ████████████ (全程一样) ease: 速度 ██▬▬████████▬▬ (两头慢中间快) ease-in: 速度 ▬▬████████████ (慢启动) ease-out: 速度 ████████████▬▬ (慢停止)
七、在商品详情页中的应用
在您的代码中，这个属性用于实现选项卡切换的淡入淡出效果：
css
.mr-fade {
opacity: 0;
transition: opacity .2s linear; /* 透明度变化时0.2秒平滑过渡 */}.mr-fade.mr-in {
opacity: 1;}效果：
切换选项卡时，内容面板不是突然消失/出现
而是在 0.2 秒内平滑地淡出/淡入
用户体验更流畅自然
八、完整写法示例
css
/* 只监控一个属性 */transition: opacity .2s linear;/* 监控多个属性（用逗号分隔） */transition: opacity .2s linear, transform .3s ease;/* 监控所有属性 */transition: all .2s linear;/* 完整写法（包含延迟） */transition: opacity .2s linear 0.1s;/* 属性 时间 速度 延迟 */
九、总结
| 问题 | 答案 |
|---|---|
| 这行代码什么意思？ | 透明度变化时用 0.2 秒匀速过渡 |
opacity 是什么？ | 透明度属性（0=透明，1=不透明） |
.2s 是什么？ | 过渡持续时间 0.2 秒 |
linear 是什么？ | 匀速变化（全程速度不变） |
| 没有它会怎样？ | 透明度瞬间变化，没有动画效果 |
| 有什么用？ | 让淡入淡出效果更平滑自然 |
一句话总结：transition: opacity .2s linear; 告诉浏览器“当这个元素的透明度变化时，别瞬间完成，用 0.2 秒的时间匀速变过去”，从而实现平滑的淡入淡出动画效果