Question

我目前有以下

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中，并且无法弄清楚为什么它在出现时不会使用转换。

感谢任何帮助，谢谢！

Answer 1

转换不适用于display属性。你必须像我在这里所做的那样设置像height这样的属性：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属性设置为从未达到的非常高的值来进行转换。但它确实有其后果。当max-height从0转换为该高值时，您必须调整转换持续时间以消除延迟。

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

Answer 2

从display: none;移除.sidebar_content，因为您的转换不会对其产生影响。
使用height: 0隐藏元素，因为将其设置为display: none会禁用转换。
将.sidebar_wrapper设置为overflow: hidden以隐藏尚未到达最终位置的.sidebar_content部分。

<强> CSS

.sidebar_wrapper { width: 150px;  }
.sidebar_header { width: 150px; background-color: #F18986; overflow: hidden; }
.sidebar_content { height: 0; width: 150px; background-color: #444; margin-left: -150px;
transition: all 1s linear; -webkit-transition: all 1s linear; }
.sidebar_header:hover + .sidebar_content { height: auto; margin-left: 0px; }

DEMO： http://jsfiddle.net/MLPLs/

Answer 3

您无法使用此过渡。但是你可以使用CSS3的动画：

sidebar_header:hover + .sidebar_content 
{
    display: block;
    animation: fadein 2s;  
    -webkit-animation: fadein 2s;   
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
}

@-webkit-keyframes fadein
{  
   from   {opacity:0;}
   to {opacity:1;margin-left:0;}
}

@keyframes fadein
{  
   from   {opacity:0;}
   to {opacity:1;margin-left:0;}
}

animation-fill-mode = 目标将保留执行期间遇到的最后一个关键帧设置的计算值

这样你仍然可以使用display：none;完全摆脱元素。

这是 demo。

Answer 4

transition不适用于display，您必须这样做：

jsFiddle is here

<强> 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;
    overflow: hidden;
}
.sidebar_header {
    width: 150px;
    background-color: #F18986;
    position: relative;
    z-index: 3
}
.sidebar_content {
    width: 150px;
    display: block;
    margin-top: -20px;
    -webkit-transition: all 1s;
    position: relative;
    z-index: 1;
    background-color: #444;
}
.sidebar_header:hover + .sidebar_content {
    display: inherit;
    margin-top: 0px;
}

添加转换效果到我的CSS

4 个答案: