如何过渡高度:0；到高度:自动；使用 CSS? [英] How can I transition height: 0; to height: auto; using CSS?

问题描述

我正在尝试使用 CSS 转换使

向下滑动.
从 height: 0; 开始.悬停时，高度设置为 height:auto;.然而，这导致它只是出现，不是过渡，

如果我从height: 40px; 到height: auto;，那么它会向上滑动到height: 0;，然后突然跳到正确的高度.

如果不使用 JavaScript，我还能怎么做?

#child0 {高度:0；溢出:隐藏；背景颜色:#dedede;-moz-transition:高度 1s 缓和；-webkit-transition:高度 1s 缓和；-o-transition:高度 1s 缓和；过渡:高度1s缓和；}#parent0:悬停#child0 {高度:自动；}#child40 {高度:40px；溢出:隐藏；背景颜色:#dedede;-moz-transition:高度 1s 缓和；-webkit-transition:高度 1s 缓和；-o-transition:高度 1s 缓和；过渡:高度1s缓和；}#parent40:悬停#child40 {高度:自动；}h1{字体粗细:粗体；}

这两个 CSS 片段的唯一区别是一个高度:0，另一个高度:40.<小时><div id="parent0"><h1>悬停在我身上(高度:0)</h1><div id="child0">一些内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>

<小时><div id="parent40"><h1>悬停在我身上(高度:40)</h1><div id="child40">一些内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>

解决方案

在过渡中使用 max-height 而不是 height.并在 max-height 上设置一个比你的盒子更大的值.

参见 Chris Jordan 在另一个在此处回答.

#menu #list {最大高度:0；过渡:最大高度 0.15 秒缓出；溢出:隐藏；背景:#d5d5d5；}#menu:hover #list {最大高度:500px；过渡:最大高度 0.25s 缓入；}

<a>悬停在我身上</a><ul id="列表"><!-- 创建一堆或不是一堆 li 来查看时间.--><li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li>

I am trying to make a <ul> slide down using CSS transitions.

The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not transition,

If I do it from height: 40px; to height: auto;, then it will slide up to height: 0;, and then suddenly jump to the correct height.

How else could I do this without using JavaScript?

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent40:hover #child40 {
  height: auto;
}
h1 {
  font-weight: bold;
}

The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
  <h1>Hover me (height: 0)</h1>
  <div id="child0">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>
<hr>
<div id="parent40">
  <h1>Hover me (height: 40)</h1>
  <div id="child40">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>

解决方案

Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get.

See JSFiddle demo provided by Chris Jordan in another answer here.

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

这篇关于如何过渡高度:0；到高度:自动；使用 CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！