为什么 CSS 转换不能与'display”属性一起使用？

CSS3 过渡不适用于显示属性

问题描述：

尝试使用CSS 过渡到悬停时淡入隐藏的 div 不会产生所需的结果；没有观察到缓动过渡。

代码分析：

检查所提供的代码后，很明显问题源于 display 属性的使用。 CSS 中的显示属性控制页面上元素的存在和可见性。当设置为 none 时，因为它处于隐藏 div 的初始状态，该元素将从页面的文档流中删除并有效地呈现为不可见。

过渡适用性：

CSS 过渡仅适用于影响元素几何形状或外观的属性。对于显示属性，它会切换元素的可见性状态，而不是更改其几何形状或外观。因此，过渡无法应用于 display 属性。

使用 Opacity 的替代解决方案：

不要使用 display 属性，请考虑使用 opacity 属性来实现所需的淡入效果。 Opacity 控制元素的透明度，通过将其不透明度从 0 调整到 1，使其能够平滑淡入。

更新的 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 过渡兼容，实现平滑且动画的变换。

结论：

虽然 CSS 过渡不能应用于 display 属性，但 opacity 属性提供了可行且有效的解决方案在悬停时创建平滑的淡入效果。通过调整不透明度值，您可以控制隐藏元素的可见性和外观，实现所需的无缝过渡。

以上是为什么 CSS 转换不能与'display”属性一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！