首页 > web前端 > css教程 > 为什么当显示设置为'无”时 CSS3 过渡不起作用?

为什么当显示设置为'无”时 CSS3 过渡不起作用?

Mary-Kate Olsen
发布: 2024-11-08 08:19:01
原创
985 人浏览过

Why Do CSS3 Transitions Not Work When Display Is Set To None?

CSS3 过渡不适用于 Display 属性

在 CSS 中,display 属性在定义元素是否可见或隐藏方面起着至关重要的作用。另一方面,过渡可以随着时间的推移实现平滑的视觉变化。但是,尝试将过渡应用于显示设置为无的元素可能会导致意外行为。

解决问题

问题源于显示的性质财产。当元素的显示设置为无时,它将从页面中删除,就好像它从未存在过一样。因此,它无法部分显示或进行过渡。

替代解决方案:使用不透明度

要在悬停时实现所需的淡入淡出效果,请考虑使用不透明度属性。 Opacity 控制元素的透明度,使其逐渐出现或消失。

CSS 解决方案

实现以下 CSS 调整以启用淡入淡出效果:

#header #button:hover > .content {
    opacity: 1;
    height: 150px;
    padding: 8px;
}

#header #button .content {
    opacity: 0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}
登录后复制

通过结合不透明度和过渡,当鼠标悬停在按钮上时,隐藏的内容会淡入视图。为了简洁起见,省略了跨浏览器兼容性的供应商前缀。

其他注意事项

除了不透明度之外,还可以探索调整高度和填充属性以实现类似的效果

其他资源

  • [CSS 过渡教程](https://www.w3schools.com/css/css3_transitions.asp)
  • [使用 CSS 转换处理隐藏元素](https://css-tricks.com/transitions-with-hidden-elements/)
  • [Stack Overflow 上的类似主题](https://stackoverflow .com/questions/30130725/css-animation-not-visible-when-display-none)

以上是为什么当显示设置为'无”时 CSS3 过渡不起作用?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板