Html 向我的css添加过渡效果

我目前有以下几点

HTML

我希望当它们悬停在标题上时，内容显示（我已经完成了），现在我想添加一个转换，以便在我

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

对于css，它什么也不做，我已经将它添加到.sidebar_标题和.sidebar_内容中，无法理解为什么它在出现时不使用转换

---

任何帮助都将不胜感激，谢谢

转换在“显示”属性上不起作用。您必须像我在这里所做的那样，将属性设置为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;
}

不能过渡到“高度自动”。如果您不想固定侧边栏内容的高度

您必须通过将“最大高度”属性设置为一个它永远无法达到的非常高的值来进行转换。但它确实有其后果。当“最大高度”从0过渡到该高值时，必须调整过渡持续时间以消除延迟

随着“最大高度”的最大值增加，反向过渡将延迟

删除

显示：无来自
.sidebar\u content
，因为您的转换不会对其产生影响

使用

height:0

隐藏元素，因为将其设置为

display:none

将禁用转换

将

.sidebar\u wrapper

设置为

overflow:hidden

以隐藏未到达最终位置的

.sidebar\u内容部分

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; }

---

演示：

您不能将transition与此一起使用。但是，您可以将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;}
}

动画填充模式=目标将保留由执行期间遇到的最后一个关键帧设置的计算值

这样，您仍然可以使用display:none；要完全除去元素

---

此处的

转换不适用于
显示
，必须执行以下操作：


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>

.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;
}

选中此项，他使用的是不透明度，显示不适用于过渡。
<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>

.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;
}