html - 为我的CSS添加过渡效果

我目前有以下

的HTML

<div id="left_nav_wrapper">

   <div class="sidebar_wrapper">
      <div class="sidebar_header">Header</div>
      <div class="sidebar_content">Content</div>
   </div>
   <div class="sidebar_wrapper">
       <div class="sidebar_header">Header</div>
       <div class="sidebar_content">Content</div>
   </div>

</div>

的CSS

.sidebar_wrapper { width: 150px;  }
.sidebar_header { width: 150px; background-color: #F18986;  }
.sidebar_content { display: none; width: 150px; margin-left: -150px; background-color: #444; }
.sidebar_header:hover + .sidebar_content { display: inherit; margin-left: 0px; }

我想要当他们将鼠标悬停在标题上时，内容显示（已完成），现在我想添加一个过渡，以便当我滑入时

add transition: all 1s;
-webkit-transition: all 1s;

到CSS并没有任何作用，我已将其添加到.sidebar_header和.sidebar_content中，无法弄清楚为什么它在显示时不使用过渡。

感谢您的任何帮助！

最佳答案

过渡不适用于显示属性。您必须像我在这里一样设置高度属性：0到100px。

.sidebar_content {
    height: 0;
    width: 150px;
    margin-left: -150px;
    background-color: #444;
    -moz-transition: height 0.5s ease-in;
    -o-transition: height 0.5s ease-in;
    -webkit-transition: height 0.5s ease-in;
    transition: height 0.5s ease-in;
}

.sidebar_header:hover + .sidebar_content {
    height: 100px;
    margin-left: 0px;
}

您无法转换为自动高度。如果您不想固定sidebar_content的高度

您必须通过将max-height属性设置为从未达到的非常高的值来进行过渡。但这确实有其后果。当最大高度从0过渡到该高值时，您将不得不调整过渡持续时间以消除延迟。

随着最大高度的最大值增加，您的反向转换将被延迟

关于html - 为我的CSS添加过渡效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19230611/