用 opacity 和 visibility 组合配合 transition 实现自然淡入淡出，避免 display 切换；定义 fade-in 动画并设置 transition 时序，确保进出动效平滑，辅以 position: absolute 或固定高度防抖动。
直接切换内容会显得生硬，用 @keyframes 配合 opacity 和 transition 就能实现自然的淡入淡出效果，不需要 JS 也能完成。
基础 fade-in 动画定义
先写一个标准的淡入关键帧，从完全透明到完全不透明：
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
这个动画默认是线性执行的，如果想更柔和，可改用 cubic-bezier(.25,.46,.45,.94) 或直接用 ease-in-out。
给切换容器加动效逻辑
关键不是只加动画，而是控制「显示/隐藏」时的过渡节奏。推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 用
opacity控制可见性，而非display: none（后者无法过渡） - 配合
visibility: hidden/visible防止不可见内容被聚焦或影响布局 - 为容器设置
transition: opacity .3s ease-in-out, visibility 0s .3s—— 先过渡透明度，延迟后才更新可见性
标签切换时的实用写法示例
假设你用 class 控制面板显隐（如 .panel.active）：
.panel {
opacity: 0;
visibility: hidden;
transition: opacity .3s ease-in-out, visibility 0s .3s;
}
.panel.active {
opacity: 1;
visibility: visible;
animation: fade-in .3s ease-in-out forwards;
}
注意：这里 animation 是为了确保每次激活都重播淡入；transition 则负责退出时的淡出（只要移除 .active，opacity 就会自动回落）。
进阶提示：避免闪跳和布局抖动
如果内容高度不一致，切换时可能拉伸容器。解决方法：
- 给父容器设固定高度，或使用
min-height预留空间 - 所有面板统一设置
position: absolute并叠在一起，只靠z-index和opacity控制显示顺序 - 加
will-change: opacity提升动画性能（尤其在低端设备上）
基本上就这些。不复杂但容易忽略细节——重点是别用 display 切换，坚持用 opacity + visibility 组合，再配上合理的 transition 时序，就能做出很顺滑的标签内容切换效果。
