为什么我的 CSS3 过渡在使用 Display 属性时不起作用？

CSS3 过渡不适用于 Display 属性

概述

本文解决了使用 display 属性时 CSS 过渡无法正常工作的问题。它提供了见解和替代解决方案以实现所需的效果。

问题陈述

目标是创建一种效果，隐藏的 div 在悬停在其父元素上时平滑淡入。然而，尝试使用 CSS 过渡来实现这一点并不成功，导致隐藏的 div 只出现而没有任何过渡。

根本原因

CSS 过渡无法应用于设置了 display 属性的元素没有人。这是因为 display: none 会从文档流中完全删除该元素，使其无法产生任何效果。

替代解决方案

为了实现所需的淡入淡出效果，我们可以使用 opacity 属性显示的。通过操纵隐藏 div 的不透明度，我们可以在鼠标悬停时逐渐显示它。

这里是更新的 CSS 代码：

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

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;

    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

在此代码中，隐藏 div 的不透明度最初设置为 0，使其不可见。当将鼠标悬停在父按钮上时，不透明度逐渐过渡到 1，以平滑的淡入淡出效果显示 div。

结论

通过了解 display 属性的限制并实现替代解决方案使用不透明度，可以在悬停时实现隐藏元素所需的淡入过渡效果。

以上是为什么我的 CSS3 过渡在使用 Display 属性时不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！