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

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中文网其他相关文章！