即使不透明度发生变化，CSS 过渡也不适用于元素答案

【问题标题】：CSS transition does not apply to element even when its opacity is changing即使不透明度发生变化，CSS 过渡也不适用于元素
【发布时间】：2020-10-28 07:21:12
【问题描述】：

我相信在元素上设置 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;
}

【问题讨论】：

标签： css css-transitions

【解决方案1】：

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

【讨论】：

【解决方案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;
}

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

【讨论】：