visibility不支持过渡动画因其只有显隐两种状态，需配合opacity实现平滑显示隐藏效果。
在CSS中，transition 与 visibility 组合使用时，不能实现平滑的显示/隐藏过渡效果，原因在于 visibility 只有两个离散状态：visible 和 hidden，它不支持中间状态，因此无法被 transition 平滑过渡。
visibility 的特性限制动画效果
visibility: hidden 会让元素不可见，但仍占据文档流中的空间。虽然它的值看似可以切换，但 transition 无法对这种非数值型、非连续性的属性进行插值计算。
例如以下代码不会产生渐变过渡效果：
.element { visibility: visible; opacity: 1; transition: visibility 0.5s ease;}.element.hidden { visibility: hidden;}
上面这段代码中，visibility 的变化是瞬间完成的，即使写了 transition，也不会有动画过程。
立即学习“前端免费学习笔记（深入）”；
实现平滑显示隐藏的正确方式
要实现视觉上的淡入淡出效果，应结合 opacity 和 visibility，利用 transition 控制 opacity，再通过状态切换控制 visibility 的时机。
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情
推荐做法：
.fade-element { opacity: 1; visibility: visible; transition: opacity 0.3s ease;}.fade-element.hidden { opacity: 0; visibility: hidden;}
这样，opacity 负责视觉上的渐隐动画，而 visibility: hidden 确保元素最终不再可交互或遮挡其他内容。
配合 height 或 transform 实现更多效果
如果需要类似展开收起的效果，可以用 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组合显示隐藏的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1012116.html
微信扫一扫 
支付宝扫一扫 
