0

我目前有以下

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

任何帮助将不胜感激谢谢！

4

4 回答 4

1

过渡不适用于显示属性。你必须像我在这里所做的那样设置像 height: 0 to 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 转换到该高值时的延迟。

随着 max-height 的最大值增加，您的反向转换将被延迟

于 2013-10-07T17:07:52.977 回答
0

您不能对此使用过渡。但是，您可以使用 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; 彻底摆脱元素。

这里有一个演示。

于 2013-10-07T17:17:11.690 回答
0

  1. 删除display: none;，.sidebar_content因为您的过渡不会对其产生影响。

  2. 用于height: 0隐藏元素，因为将其设置为display: none将禁用过渡。

  3. 设置.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; }

演示：http: //jsfiddle.net/MLPLs/

于 2013-10-07T17:13:06.337 回答
0

transition不工作display，你必须这样做：

jsFiddle 在这里

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;
}
于 2013-10-07T17:17:54.610 回答