visibility不支持过渡动画因其只有显隐两种状态，需配合opacity实现平滑显示隐藏效果。
在CSS中，transition 与 visibility 组合使用时，不能实现平滑的显示/隐藏过渡效果，原因在于 visibility 只有两个离散状态：visible 和 hidden，它不支持中间状态，因此无法被 transition 平滑过渡。
visibility: hidden 会让元素不可见，但仍占据文档流中的空间。虽然它的值看似可以切换，但 transition 无法对这种非数值型、非连续性的属性进行插值计算。
例如以下代码不会产生渐变过渡效果：
.element {
visibility: visible;
opacity: 1;
transition: visibility 0.5s ease;
}
.element.hidden {
visibility: hidden;
}
上面这段代码中，visibility 的变化是瞬间完成的，即使写了 transition，也不会有动画过程。
立即学习“前端免费学习笔记（深入）”；
要实现视觉上的淡入淡出效果，应结合 opacity 和 visibility，利用 transition 控制 opacity，再通过状态切换控制 visibility 的时机。
推荐做法：
.fade-element {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.fade-element.hidden {
opacity: 0;
visibility: hidden;
}
这样，opacity 负责视觉上的渐隐动画，而 visibility: hidden 确保元素最终不再可交互或遮挡其他内容。
如果需要类似展开收起的效果，可以用 max-height 模拟高度过渡：
.collapse {
max-height: 200px;
overflow: hidden;
transition: max-height 0.4s ease;
}
.collapse.collapsed {
max-height: 0;
}
再结合 visibility 防止内容可点击：
.collapse {
visibility: visible;
opacity: 1;
transition: all 0.4s ease;
}
.collapse.collapsed {
opacity: 0;
visibility: hidden;
max-height: 0;
}
基本上就这些。关键点是：不要指望 visibility 自身能动画，而是用 opacity 做过渡，visibility 做最终状态控制，两者配合才能既美观又功能完整。
以上就是在css中transition与visibility组合显示隐藏的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
592
收藏
