CSS 过渡不适用于元素，即使它的不透明度正在改变

Question

我认为在元素上设置 transition 应该意味着当它的样式发生变化时（在本例中从 opacity: 0 到 opacity: 1 指定的过渡应该运行. 然而，我发现在我的情况下它并不是简单地“出现”。

https://codepen.io/asos-francesca/pen/xxOroON

我正在通过其父元素接收悬停来调整元素的不透明度，这可能是它不起作用的原因吗？

.submenu {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  transition-delay: 0.2s;
}
  
.hoverable:hover .submenu {
  display: block;
  opacity: 1;
}

Answer 1

将显示从 none 更改为 hidden 允许进行转换。但是，您仍然面临背景问题。不太清楚你想要的最终效果是什么？

Answer 2

要完成 mah111 的答案，您可以在子菜单中使用绝对位置。例如，我像这样重写您的代码：

<nav class="hoverable">
  <div>
    Hover me
  <div/>

  <ul class="submenu"><li>Item</li></ul>
</nav>

和 css :

.submenu {
  display: hidden;
  position: absolute;
  width:100%;
  background-color: pink;
  opacity: 0;
  padding-left: 20px;
  top: 22px;
  left: 0;
  transition: all 0.5s ease-in-out 0.5s;
}

.hoverable {
  cursor: pointer;
  padding: 10px;
  background-color: pink;
  display: inline-block;
  position: relative;
}
  
.hoverable:hover .submenu {
  display: block;
  opacity: 1;
}

如果您有多个主类别和子菜单，您应该将每个主类别和子菜单包含在单独的容器中（但例如在同一个导航中）以轻松调整绝对位置。

CSS 过渡不适用于元素，即使它的不透明度正在改变

CSS transition does not apply to element even when its opacity is changing

css

css-transitions