我如何过渡高度：0;高度：自动；使用CSS？

StackOverflow https://stackoverflow.com/questions/3508605

  •  29-09-2019
  •  | 
  •  

题

我正在尝试做一个 <ul> 使用CSS过渡向下滑动。

这 <ul> 开始 height: 0;. 。在悬停时，高度设置为 height:auto;. 。但是，这使它简单地出现， 不是 过渡，

如果我从 height: 40px; 到 height: auto;, ，然后它将滑到 height: 0;, ，然后突然跳到正确的高度。

如果不使用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>

有帮助吗？

解决方案

采用 max-height 在转型而不是 height. 。并设置一个价值 max-height 对于比您的盒子更大的东西。

看 JSFIDDLE演示 克里斯·乔丹（Chris Jordan）在另一个 回答 这里。

#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>

其他提示

您应该使用Scaley。

html：

<p>Here (scaleY(1))</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

CSS：

ul {
    background-color: #eee;
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
}

p:hover ~ ul {
    transform: scaleY(1);
}

我在JSFIDDLE上制作了上述代码的供应商前缀， http://jsfiddle.net/dotnetcarpenter/phyqc/9/ 并更改了您的JSFIDDLE，以使用Scaley而不是高度， http://jsfiddle.net/dotnetcarpenter/7cnfc/206/.

当涉及的高度之一是 auto, ，您必须设置两个显式高度。

我一直使用的解决方案是首先消失，然后收缩 font-size, padding 和 margin 值。它看起来与擦除不一样，但没有静态 height 或者 max-height.

工作示例：

/* final display */
#menu #list {
    margin: .5em 1em;
    padding: 1em;
}

/* hide */
#menu:not(:hover) #list {
    font-size: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    /* fade out, then shrink */
    transition: opacity .25s,
                font-size .5s .25s,
                margin .5s .25s,
                padding .5s .25s;
}

/* reveal */
#menu:hover #list {
    /* unshrink, then fade in */
    transition: font-size .25s,
                margin .25s,
                padding .25s,
                opacity .5s .25s;
}
<div id="menu">
    <b>hover me</b>
    <ul id="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

<p>Another paragraph...</p>

我知道这是这个问题的三十多岁的答案，但我认为这是值得的，所以就在这里。这是一个 仅CSS 具有以下属性的解决方案：

  • 一开始就没有延迟，并且过渡不会尽早停止。在两个方向（扩展和崩溃）中，如果您指定CSS的过渡持续时间为300ms，则过渡需要300ms，时间为期限。
  • 它正在过渡实际高度（与 transform: scaleY(0)），因此，如果有可折叠元素之后的内容，它可以做正确的事情。
  • 而（就像其他解决方案一样） 是 魔术数字（例如，“选择比您的盒子要高的长度”），如果您的假设最终出错，那不是致命的。在这种情况下，过渡可能看起来并不令人惊奇，但是在过渡之前和之后，这不是一个问题：在扩展中（height: auto）说，整个内容始终具有正确的高度（例如，如果您选择一个 max-height 事实证明太低了）。在折叠状态下，高度为零。

演示

这是一个具有三个可折叠元素的演示，所有不同的高度都使用了相同的CSS。单击“运行摘要”后，您可能需要单击“完整页面”。请注意，JavaScript仅切换 collapsed CSS课程，没有涉及的测量。 （您可以通过使用复选框或 :target）。另请注意，CSS负责过渡的一部分很短，而HTML仅需要一个附加的包装元素。

$(function () {
  $(".toggler").click(function () {
    $(this).next().toggleClass("collapsed");
    $(this).toggleClass("toggled"); // this just rotates the expander arrow
  });
});
.collapsible-wrapper {
  display: flex;
  overflow: hidden;
}
.collapsible-wrapper:after {
  content: '';
  height: 50px;
  transition: height 0.3s linear, max-height 0s 0.3s linear;
  max-height: 0px;
}
.collapsible {
  transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
  margin-bottom: 0;
  max-height: 1000000px;
}
.collapsible-wrapper.collapsed > .collapsible {
  margin-bottom: -2000px;
  transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),
              visibility 0s 0.3s, max-height 0s 0.3s;
  visibility: hidden;
  max-height: 0;
}
.collapsible-wrapper.collapsed:after
{
  height: 0;
  transition: height 0.3s linear;
  max-height: 50px;
}

/* END of the collapsible implementation; the stuff below
   is just styling for this demo */

#container {
  display: flex;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
}  


.menu {
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  margin: 20px;

  
}

.menu-item {
  display: block;
  background: linear-gradient(to bottom, #fff 0%,#eee 100%);
  margin: 0;
  padding: 1em;
  line-height: 1.3;
}
.collapsible .menu-item {
  border-left: 2px solid #888;
  border-right: 2px solid #888;
  background: linear-gradient(to bottom, #eee 0%,#ddd 100%);
}
.menu-item.toggler {
  background: linear-gradient(to bottom, #aaa 0%,#888 100%);
  color: white;
  cursor: pointer;
}
.menu-item.toggler:before {
  content: '';
  display: block;
  border-left: 8px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  width: 0;
  height: 0;
  float: right;
  transition: transform 0.3s ease-out;
}
.menu-item.toggler.toggled:before {
  transform: rotate(90deg);
}

body { font-family: sans-serif; font-size: 14px; }

*, *:after {
  box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

</div>

它是如何工作的？

实际上有 二 实现这一目标的过渡。其中之一过渡 margin-bottom 从0px（在扩展状态）到 -2000px 在崩溃状态（类似于 这个答案）。这里的2000是第一个魔术数字，它基于这样的假设：您的盒子不会高（2000像素似乎是一个合理的选择）。

使用 margin-bottom 单独过渡本身有两个问题：

  • 如果您实际上有一个高于2000像素的盒子，那么 margin-bottom: -2000px 不会隐藏所有东西 - 即使在崩溃的情况下，也会有可见的东西。这是一个较小的修复，我们将在以后进行。
  • 如果实际框高1000像素，并且您的过渡长300ms，则 可见的 过渡已经结束，大约150毫秒（或在相反的方向上开始150ms）。

解决第二个问题是第二个过渡的位置，此过渡从概念上讲是针对包装器的 最低限度 高度（“从概念上”，因为我们实际上没有使用 min-height 为此的财产；稍后再详细介绍）。

这是一个动画，该动画显示了如何将底部边缘过渡与最小高度转换相结合，这两个持续时间都相等，从而使我们从全高到零高的合并过渡，具有相同的持续时间。

animation as described above

左条显示了负底部边缘如何向上推动底部，从而降低了可见的高度。中间条显示了最小高度如何确保在崩溃的情况下，过渡不会尽早结束，在扩展的情况下，过渡不会迟到。正确的条显示了两者的组合如何使框以正确的时间从全高度转换为零高。

对于我的演示，我将50px定居为最低高度值。这是第二个魔术数字，应该低于盒子的高度。 50px似乎也是合理的。您似乎不太可能想使元素折叠起来，该元素首先甚至不高50像素。

正如您在动画中看到的那样，产生的过渡是连续的，但是这不是可区分的 - 在最小高度等于由底部边缘调节的全高度等于的那一刻，速度突然发生了变化。这在动画中非常明显，因为它在两个过渡中都使用线性正时函数，并且由于整个过渡非常慢。在实际情况（我的顶部的演示）中，过渡仅需300ms，底部边缘过渡不是线性的。我在两个过渡方面都玩过许多不同的计时功能，而我最终感到的感觉就像它们最适合最广泛的案例。

仍有两个问题要解决：

  1. 从上方的点，超过2000像素高度的盒子并未完全隐藏在崩溃的状态中，
  2. 相反的问题，在非隐藏的情况下，即使过渡不运行，小于50像素的盒子也太高了，因为最小高度将它们保持在50像素的位置。

我们通过给容器元素A解决了第一个问题 max-height: 0 在崩溃的情况下， 0s 0.3s 过渡。这意味着它不是真正的过渡，而是 max-height 延迟应用；它只有一旦过渡结束就适用。为此，我们还需要选择一个数字 max-height 对于相反的，非collap的状态。但是，与2000PX的情况不同，在这种情况下，挑选数量太大会影响过渡的质量，在这种情况下，这确实没关系。因此，我们可以选择一个如此高的数字以至于我们 知道 没有这个高度将接近这一点。我选择了一百万像素。如果您认为您可能需要支持超过一百万像素的高度内容，那么1）对不起，2）只需添加几个零即可。

第二个问题是我们实际上不使用的原因 min-height 对于最小高度转换。相反，有一个 ::after 带有A的伪元素 height 这从50px转变为零。这具有与一个相同的效果 min-height: ：它不会让容器缩小到当前伪元的任何高度以下。但是因为我们正在使用 height, ， 不是 min-height, ，我们现在可以使用 max-height （再次延迟应用），一旦过渡结束，将伪元素的实际高度设置为零，以确保至少在过渡之外，即使很小的元素也具有正确的高度。因为 min-height 是 更强 比 max-height, ，如果我们使用了容器的 min-height 而不是伪元素 height. 。就像 max-height 在上一段中，这个 max-height 还需要一个值的价值来实现过渡的另一端。但是在这种情况下，我们可以选择50px。

在Chrome（Win，Mac，Android，iOS），Firefox（Win，Mac，Android），Edge，IE11中测试（我没有费力调试）和Safari（Mac，ios，iOS，iOS，ios，ie11除外）。说到Flexbox，应该可以在不使用任何Flexbox的情况下进行此工作；实际上，我认为您几乎可以使IE7中的所有功能都起作用 - 除了您不会进行CSS过渡，这使其成为毫无意义的练习。

您可以有一点非语义跳动式挑战。我通常的方法是使外部div的高度动画，该div的高度有一个单个孩子，该孩子仅用于测量内容高度。

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div class='measuringWrapper'>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
  </div>
</div>

一个人希望能够分配 .measuringWrapper 只是将DIV的高度设置为自动，并具有动画功能，但这似乎不起作用（设置高度，但没有动画发生）。

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    growDiv.style.height = 'auto';
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
</div>

我的解释是，动画需要明确的高度。当高度（起始高度或端高）为时，您将无法在高度上获得动画 auto.

使用CSS3过渡对高度进行动画的视觉解决方法是为填充而动画。

您不会完全获得完整的擦除效果，但是要进行过渡效果和填充值可以使您足够接近。如果您不想明确设置高度/最大高度，则应该是您想要的。

div {
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated {
    height: auto;
    padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5xfg/17/ （从JSFIDDLE上方的Stephband摘下来）

我的解决方法是将最大高度转换为精确的内容高度以进行精美的动画，然后使用过渡条件回调将最大高点设置为9999px，以便内容可以自由分配。

var content = $('#content');
content.inner = $('#content .inner'); // inner div needed to get size of content when closed

// css transition callback
content.on('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function(e){
    if(content.hasClass('open')){
        content.css('max-height', 9999); // try setting this to 'none'... I dare you!
    }
});

$('#toggle').on('click', function(e){
    content.toggleClass('open closed');
    content.contentHeight = content.outerHeight();
    
    if(content.hasClass('closed')){
        
        // disable transitions & set max-height to content height
        content.removeClass('transitions').css('max-height', content.contentHeight);
        setTimeout(function(){
            
            // enable & start transition
            content.addClass('transitions').css({
                'max-height': 0,
                'opacity': 0
            });
            
        }, 10); // 10ms timeout is the secret ingredient for disabling/enabling transitions
        // chrome only needs 1ms but FF needs ~10ms or it chokes on the first animation for some reason
        
    }else if(content.hasClass('open')){  
        
        content.contentHeight += content.inner.outerHeight(); // if closed, add inner height to content height
        content.css({
            'max-height': content.contentHeight,
            'opacity': 1
        });
        
    }
});
.transitions {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}

body {
    font-family:Arial;
    line-height: 3ex;
}
code {
    display: inline-block;
    background: #fafafa;
    padding: 0 1ex;
}
#toggle {
    display:block;
    padding:10px;
    margin:10px auto;
    text-align:center;
    width:30ex;
}
#content {
    overflow:hidden;
    margin:10px;
    border:1px solid #666;
    background:#efefef;
    opacity:1;
}
#content .inner {
    padding:10px;
    overflow:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="content" class="open">
    <div class="inner">
        <h3>Smooth CSS Transitions Between <code>height: 0</code> and <code>height: auto</code></h3>
        <p>A clever workaround is to use <code>max-height</code> instead of <code>height</code>, and set it to something bigger than your content. Problem is the browser uses this value to calculate transition duration. So if you set it to <code>max-height: 1000px</code> but the content is only 100px high, the animation will be 10x too fast.</p>
        <p>Another option is to measure the content height with JS and transition to that fixed value, but then you have to keep track of the content and manually resize it if it changes.</p>
        <p>This solution is a hybrid of the two - transition to the measured content height, then set it to <code>max-height: 9999px</code> after the transition for fluid content sizing.</p>
    </div>
</div>

<br />

<button id="toggle">Challenge Accepted!</button>

所接受的答案在大多数情况下都有效，但是当您的 div 高度的差异可能很大 - 动画速度不取决于内容的实际高度，并且看起来可能会断断续续。

您仍然可以使用CSS执行实际动画，但是您需要使用JavaScript来计算项目的高度，而不是尝试使用 auto. 。不需要jQuery，尽管如果需要兼容性，则可能需要对此进行一些修改（在最新版本的Chrome中起作用:)）。

window.toggleExpand = function(element) {
    if (!element.style.height || element.style.height == '0px') { 
        element.style.height = Array.prototype.reduce.call(element.childNodes, function(p, c) {return p + (c.offsetHeight || 0);}, 0) + 'px';
    } else {
        element.style.height = '0px';
    }
}
#menu #list {
    height: 0px;
    transition: height 0.3s ease;
    background: #d5d5d5;
    overflow: hidden;
}
<div id="menu">
    <input value="Toggle list" type="button" onclick="toggleExpand(document.getElementById('list'));">
    <ul id="list">
        <!-- Works well with dynamically-sized content. -->
        <li>item</li>
        <li><div style="height: 100px; width: 100px; background: red;"></div></li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

采用 max-height 每个州都有不同的过渡缓解和延迟。

html：

<a href="#" id="trigger">Hover</a>
<ul id="toggled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
<ul>

CSS：

#toggled{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s;
}

请参阅示例： http://jsfiddle.net/0hnjehjc/1/

没有硬编码值。

没有JavaScript。

没有近似值。

诀窍是使用隐藏和复制 div 为了让浏览器了解100％的含义。

只要您能够复制要动画元素的元素的DOM，此方法都是合适的。 

.outer {
  border: dashed red 1px;
  position: relative;
}

.dummy {
  visibility: hidden;
}

.real {
  position: absolute;
  background: yellow;
  height: 0;
  transition: height 0.5s;
  overflow: hidden;
}

.outer:hover>.real {
  height: 100%;
}
Hover over the box below:
<div class="outer">
  <!-- The actual element that you'd like to animate -->
  <div class="real">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
  <!-- An exact copy of the element you'd like to animate. -->
  <div class="dummy" aria-hidden="true">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
</div>

几乎没有提到 Element.scrollHeight 在这里可以有用的属性，并且仍然可以与纯CSS过渡一起使用。该属性始终包含一个元素的“完整”高度，无论其内容是否以及由于崩溃而导致其内容如何溢出（例如 height: 0).

因此，对于 height: 0 （有效地完全崩溃）元素，其“正常”或“全”高度仍然可以通过它的高度获得 scrollHeight 价值（总是 像素 长度）。

对于这样的元素，假设它已经具有像EG一样的过渡设置（使用 ul 根据原始问题）：

ul {
    height: 0;
    transition: height 1s; /* An example transition. */
}

我们只能使用CSS触发所需的动画“扩展”高度的“膨胀”，并具有以下内容（在此假设 ul 变量是指列表）：

ul.style.height = ul.scrollHeight + "px";

就是这样。如果您需要折叠列表，则以下两个语句中的任何一个都会做：

ul.style.height = "0";
ul.style.removeProperty("height");

我的特殊用例围绕着未知且经常长度的动画列表，因此我不愿意安顿在任意的“足够大”上 height 或者 max-height 规格和冒险截止内容或您突然需要滚动的内容（如果 overflow: auto, ， 例如）。此外，宽松和时机与 max-height基于基于的解决方案，因为所用的高度可能比以前要快得多 max-height 到达 9999px. 。随着屏幕分辨率的增长，像素长度如 9999px 在我的嘴里留下不良的味道。我认为，这种特殊的解决方案以优雅的方式解决了问题。

最后，在这里希望CSS的未来修订解决作者需要更优雅地做这类事情的需求 - 重新审视“计算”“使用”和“解决”和“解决”的概念，并考虑是否应适用于计算的过渡值，包括与 width 和 height （目前有一些特殊待遇）。

当我发布此内容时，已经有30多个答案，但是我觉得我的答案已经有所改善 接受的答案 杰克。

我不满足于简单地使用的问题 max-height 和CSS3过渡，因为正如许多评论者所指出的那样，您必须设置您的 max-height 值非常接近实际高度，否则您将获得延迟。看到这个 JSFIDDLE 对于这个问题的示例。

为了解决这个问题（尽管仍然不使用JavaScript），我添加了另一个HTML元素，该元素过渡 transform: translateY CSS值。

这两者都意味着 max-height 和 translateY 被使用： max-height 允许元素在其下方推下元素，而 translateY 给出我们想要的“即时”效果。问题 max-height 仍然存在，但其作用减少了。这意味着您可以为自己的高度设置更大的高度 max-height 价值和担心少。

总体好处是，在过渡中（崩溃）中，用户看到了 translateY 动画立即，因此多长时间没关系 max-height 带。

解决方案作为小提琴

body {
  font-family: sans-serif;
}

.toggle {
  position: relative;
  border: 2px solid #333;
  border-radius: 3px;
  margin: 5px;
  width: 200px;
}

.toggle-header {
  margin: 0;
  padding: 10px;
  background-color: #333;
  color: white;
  text-align: center;
  cursor: pointer;
}

.toggle-height {
  background-color: tomato;
  overflow: hidden;
  transition: max-height .6s ease;
  max-height: 0;
}

.toggle:hover .toggle-height {
  max-height: 1000px;
}

.toggle-transform {
  padding: 5px;
  color: white;
  transition: transform .4s ease;
  transform: translateY(-100%);
}

.toggle:hover .toggle-transform {
  transform: translateY(0);
}
<div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div>

好，所以我想我想出了一个超级简单的答案...不 max-height, ，用途 relative 定位，从事 li 元素，是纯CSS。除了Firefox，我尚未在CSS上进行测试，但它应该适用于所有浏览器。

小提琴： http://jsfiddle.net/n5xfg/2596/

CSS

.wrap { overflow:hidden; }

.inner {
            margin-top:-100%;
    -webkit-transition:margin-top 500ms;
            transition:margin-top 500ms;
}

.inner.open { margin-top:0px; }

html

<div class="wrap">
    <div class="inner">Some Cool Content</div>
</div>

编辑：向下滚动以获取更新的答案
我正在列出下拉列表并看到了这篇文章...许多不同的答案，但我决定也分享我的下拉列表，这不是完美的，但至少它将仅使用CSS进行下拉！我一直在使用Transform：Translatey（Y）将列表转换为视图...
您可以在测试中看到更多
http://jsfiddle.net/bvepc/4/
我将DIV放在每个LI的后面，因为我的下拉列表来自起来，为了适当地向他们展示这是需要的，我的DIV代码是：

#menu div {
    transition: 0.5s 1s;
    z-index:-1;
    -webkit-transform:translateY(-100%);
    -webkit-transform-origin: top;
}

悬停是： 

#menu > li:hover div {
    transition: 0.5s;
    -webkit-transform:translateY(0);
}

而且由于UL高度设置为可以克服您的身体内容的内容，这就是为什么我为UL做到这一点：

 #menu ul {
    transition: 0s 1.5s;
    visibility:hidden;
    overflow:hidden;
}

和悬停：

#menu > li:hover ul {
     transition:none;
     visibility:visible;
}

过渡后的第二次延迟，在我的下拉列表被动画关闭之后，它将被隐藏起来...
希望以后有人能从中受益。

编辑：我只是简直不敢相信PPL实际使用了此原型！这个下拉菜单仅适用于一个子菜单，仅此而已！我已经更新了一个更好的菜单，该菜单可以在LTR和RTL方向上使用IE 8支持。
ltr的小提琴
RTL的小提琴
希望有人在将来发现这很有用。

您可以从高度过渡：0到高度：自动提供您还提供最小的高度和最大高度。

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}

Flexbox解决方案

优点：

  • 简单的
  • 没有JS
  • 平稳过渡

缺点：

  • 元素需要放在固定高度柔性容器中

它的工作方式是始终在元素上使用flex-basis：auto，并过渡弹性增长和屈曲折射。

编辑：改进了受Xbox One接口启发的JS小提琴。 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.25s;
  font-family: monospace;
}

body {
  margin: 10px 0 0 10px;
}

.box {
  width: 150px;
  height: 150px;
  margin: 0 2px 10px 0;
  background: #2d333b;
  border: solid 10px #20262e;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
}

.space {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 0;    
}

p {
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1;
  background: #20262e;
  padding: 10px;
  width: 100%;
  text-align: left;
  color: white;
}

.box:hover .space {
  flex-grow: 0;
  flex-shrink: 1;
}
  
.box:hover p {
  flex-grow: 1;
  flex-shrink: 0;    
}
<div class="box">
  <div class="space"></div>
  <p>
    Super Metroid Prime Fusion
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Resident Evil 2 Remake
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Yolo The Game
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Final Fantasy 7 Remake + All Additional DLC + Golden Tophat
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    DerpVille
  </p>
</div>

JS小提琴

我想我提出了一个非常扎实的解决方案

好的！我知道这个问题与互联网一样古老，但我认为我有一个解决方案 插件称为突变转换. 。我的解决方案设置了 style="" 每当DOM发生更改时，跟踪元素的属性。最终结果是您可以使用良好的OLE CSS进行过渡，而不是使用hacky修复程序或特殊的JavaScript。您唯一要做的就是设置您要在所讨论的元素上跟踪的内容 data-mutant-attributes="X". 

<div data-mutant-attributes="height">                                                                      
        This is an example with mutant-transition                                                                                                          
    </div>

就是这样！该解决方案使用 突变操作器 遵循DOM的更改。因此，您实际上不必设置任何东西或使用JavaScript来手动使事物动画。更改会自动跟踪。但是，由于它使用突变处理器，因此仅在IE11+中过渡。

小提琴！

这是一种从任何起始高度（包括0）过渡到自动（全尺寸和灵活）的方法，而无需以每种节点或任何用户代码来初始化： https://github.com/csuwildcat/transition-auto. 。我相信这基本上是您想要的圣杯 - > http://codepen.io/csuwldcat/pen/kwsdf. 。只需将以下JS文件拍到您的页面中，然后您需要做的就是添加/删除单个布尔属性 - reveal="" - 从您想扩展和收缩的节点。

一旦在示例代码下方找到的代码块，您就需要做所有的事情：

/*** Nothing out of the ordinary in your styles ***/
<style>
    div {
        height: 0;
        overflow: hidden;
        transition: height 1s;
    }
</style>

/*** Just add and remove one attribute and transition to/from auto! ***/

<div>
    I have tons of content and I am 0px in height you can't see me...
</div>

<div reveal>
     I have tons of content and I am 0px in height you can't see me...
     but now that you added the 'reveal' attribute, 
     I magically transitioned to full height!...
</div>

这是要在您的页面中包含的代码块，之后，这全是肉汁：

将此JS文件放在您的页面上 - 一切都可以正常工作™

/*高度代码：自动；过渡 */

(function(doc){

/* feature detection for browsers that report different values for scrollHeight when an element's overflow is hidden vs visible (Firefox, IE) */
var test = doc.documentElement.appendChild(doc.createElement('x-reveal-test'));
    test.innerHTML = '-';
    test.style.cssText = 'display: block !important; height: 0px !important; padding: 0px !important; font-size: 0px !important; border-width: 0px !important; line-height: 1px !important; overflow: hidden !important;';
var scroll = test.scrollHeight || 2;
doc.documentElement.removeChild(test);

var loading = true,
    numReg = /^([0-9]*\.?[0-9]*)(.*)/,
    skipFrame = function(fn){
      requestAnimationFrame(function(){
        requestAnimationFrame(fn);
      });
    },
    /* 2 out of 3 uses of this function are purely to work around Chrome's catastrophically busted implementation of auto value CSS transitioning */
    revealFrame = function(el, state, height){
        el.setAttribute('reveal-transition', 'frame');
        el.style.height = height;
        skipFrame(function(){
            el.setAttribute('reveal-transition', state);
            el.style.height = '';
        });
    },
    transitionend = function(e){
      var node = e.target;
      if (node.hasAttribute('reveal')) {
        if (node.getAttribute('reveal-transition') == 'running') revealFrame(node, 'complete', '');
      } 
      else {
        node.removeAttribute('reveal-transition');
        node.style.height = '';
      }
    },
    animationstart = function(e){
      var node = e.target,
          name = e.animationName;   
      if (name == 'reveal' || name == 'unreveal') {

        if (loading) return revealFrame(node, 'complete', 'auto');

        var style = getComputedStyle(node),
            offset = (Number(style.paddingTop.match(numReg)[1])) +
                     (Number(style.paddingBottom.match(numReg)[1])) +
                     (Number(style.borderTopWidth.match(numReg)[1])) +
                     (Number(style.borderBottomWidth.match(numReg)[1]));

        if (name == 'reveal'){
          node.setAttribute('reveal-transition', 'running');
          node.style.height = node.scrollHeight - (offset / scroll) + 'px';
        }
        else {
            if (node.getAttribute('reveal-transition') == 'running') node.style.height = '';
            else revealFrame(node, 'running', node.scrollHeight - offset + 'px');
        }
      }
    };

doc.addEventListener('animationstart', animationstart, false);
doc.addEventListener('MSAnimationStart', animationstart, false);
doc.addEventListener('webkitAnimationStart', animationstart, false);
doc.addEventListener('transitionend', transitionend, false);
doc.addEventListener('MSTransitionEnd', transitionend, false);
doc.addEventListener('webkitTransitionEnd', transitionend, false);

/*
    Batshit readyState/DOMContentLoaded code to dance around Webkit/Chrome animation auto-run weirdness on initial page load.
    If they fixed their code, you could just check for if(doc.readyState != 'complete') in animationstart's if(loading) check
*/
if (document.readyState == 'complete') {
    skipFrame(function(){
        loading = false;
    });
}
else document.addEventListener('DOMContentLoaded', function(e){
    skipFrame(function(){
        loading = false;
    });
}, false);

/* Styles that allow for 'reveal' attribute triggers */
var styles = doc.createElement('style'),
    t = 'transition: none; ',
    au = 'animation: reveal 0.001s; ',
    ar = 'animation: unreveal 0.001s; ',
    clip = ' { from { opacity: 0; } to { opacity: 1; } }',
    r = 'keyframes reveal' + clip,
    u = 'keyframes unreveal' + clip;

styles.textContent = '[reveal] { -ms-'+ au + '-webkit-'+ au +'-moz-'+ au + au +'}' +
    '[reveal-transition="frame"] { -ms-' + t + '-webkit-' + t + '-moz-' + t + t + 'height: auto; }' +
    '[reveal-transition="complete"] { height: auto; }' +
    '[reveal-transition]:not([reveal]) { -webkit-'+ ar +'-moz-'+ ar + ar +'}' +
    '@-ms-' + r + '@-webkit-' + r + '@-moz-' + r + r +
    '@-ms-' + u +'@-webkit-' + u + '@-moz-' + u + u;

doc.querySelector('head').appendChild(styles);

})(document);

/*演示代码 */

    document.addEventListener('click', function(e){
      if (e.target.nodeName == 'BUTTON') {
        var next = e.target.nextElementSibling;
        next.hasAttribute('reveal') ? next.removeAttribute('reveal') : next.setAttribute('reveal', '');
      }
    }, false);

杰克（Jake）对最大高期动画的回答很棒，但是我发现设置了一个大型最大高度烦人而造成的延迟。

一个人可以将可折叠的内容移动到内部div中，并通过获得内部div的高度来计算最大高度（通过jQuery，它将是外部（））。

$('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});

这是一个JSFIDDLE链接： http://jsfiddle.net/pbatey/duzpt

这是一个JSFIDDLE，所需的代码绝对最少： http://jsfiddle.net/8ncjjxh8/

为了扩展 @Jake的答案，过渡将一直延伸到最大高度值，从而导致非常快速的动画 - 如果您设置了这两者的过渡：悬停和关闭，则可以更多地控制疯狂的速度。

因此，li：悬停是鼠标进入状态的时候，然后在非悬停属性上的过渡将是鼠标离开。

希望这会有所帮助。

例如： 

.sidemenu li ul {
   max-height: 0px;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   -ms-transition: all .3s ease;
   transition: all .3s ease;
}
.sidemenu li:hover ul {
    max-height: 500px;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}
/* Adjust speeds to the possible height of the list */

这是一个小提琴： http://jsfiddle.net/bukwj/

我意识到这个线程正在变老，但是在某些Google搜索中排名很高，因此我认为值得更新。

您也只需获得/设置元素的高度：

var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';

您应该在target_box的关闭标签后立即将此JavaScript转移到Inline脚本标签中。

我能够做到这一点。我有一个 .child ＆ 一种 .parent div。儿童div完全适合父母的宽度/高度 absolute 定位。然后我将 translate 将其推动的财产 Y 降低价值 100%. 。它非常平滑的动画，没有任何其他解决方案，没有小故障或侧面。

这样的东西，伪代码

.parent{ position:relative; overflow:hidden; } 
/** shown state */
.child {
  position:absolute;top:0;:left:0;right:0;bottom:0;
  height: 100%;
  transition: transform @overlay-animation-duration ease-in-out;
  .translate(0, 0);
}

/** Animate to hidden by sliding down: */
.child.slidedown {
  .translate(0, 100%); /** Translate the element "out" the bottom of it's .scene container "mask" so its hidden */
}

您将指定一个 height 在 .parent, ， 在 px, %, ，或离开 auto. 。然后将这个div掩盖 .child 当它滑下时分配。

这是我刚与JQuery结合使用的解决方案。这适用于以下HTML结构：

<nav id="main-nav">
    <ul>
        <li>
            <a class="main-link" href="yourlink.html">Link</a>
            <ul>
                <li><a href="yourlink.html">Sub Link</a></li>
            </ul>
        </li>
    </ul>
</nav>

和功能：

    $('#main-nav li ul').each(function(){
        $me = $(this);

        //Count the number of li elements in this UL
        var liCount = $me.find('li').size(),
        //Multiply the liCount by the height + the margin on each li
            ulHeight = liCount * 28;

        //Store height in the data-height attribute in the UL
        $me.attr("data-height", ulHeight);
    });

然后，您可以使用点击函数设置并使用 css()

$('#main-nav li a.main-link').click(function(){
    //Collapse all submenus back to 0
    $('#main-nav li ul').removeAttr('style');

    $(this).parent().addClass('current');

    //Set height on current submenu to it's height
    var $currentUl = $('li.current ul'),
        currentUlHeight = $currentUl.attr('data-height');
})

CSS：

#main-nav li ul { 
    height: 0;
    position: relative;
    overflow: hidden;
    opacity: 0; 
    filter: alpha(opacity=0); 
    -ms-filter: "alpha(opacity=0)";
    -khtml-opacity: 0; 
    -moz-opacity: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

#main-nav li.current ul {
    opacity: 1.0; 
    filter: alpha(opacity=100); 
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: 1.0; 
    -moz-opacity: 1.0;
}

.ie #main-nav li.current ul { height: auto !important }

#main-nav li { height: 25px; display: block; margin-bottom: 3px }

我最近一直在过渡 max-height 在 li 元素而不是包装 ul.

原因是小的延迟 max-heights 与大型相比，（如果有的话）要少得多 max-heights, ，我也可以设置我的 max-height 相对于 font-size 的 li 而不是使用一些任意的大量 ems 或者 rems.

如果我的字体尺寸为 1rem, ，我设置我的 max-height 像这样的东西 3rem （以适应包裹的文字）。您可以在这里看到一个示例：

http://codepen.io/mindfullsilence/pen/dtzje

我还没有详细阅读所有内容，但最近我遇到了这个问题，我做了以下操作：

div.class{
   min-height:1%;
   max-height:200px;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
   overflow:hidden;
}

div.class:hover{
   min-height:100%;
   max-height:3000px;
}

这使您可以拥有一个最初显示最高200px高度的内容，并且在悬停的大小上，它的大小至少与DIV的整体内容一样高。 DIV不会变为3000px，但3000px是我所施加的极限。确保对非：悬停的过渡，否则您可能会得到一些奇怪的渲染。这样，悬停从非：悬停就继承。

过渡不起作用的PX为％或自动。您需要使用相同的度量单位。这对我来说很好。使用HTML5使其完美...

请记住，总是有工作...； ）

希望有人发现这个有用

这并不是解决问题的“解决方案”，而是一种解决方法。我敢肯定，它只能用文本写作，但可以根据需要更改以与其他元素一起使用。

.originalContent {
    font-size:0px;
    transition:font-size .2s ease-in-out;
}
.show { /* class to add to content */
    font-size:14px;
}

这是一个示例： http://codepen.io/overthemike/pen/wzjrka

本质上，您将字体大小设置为0，并以足够快的速度过渡，而不是高度，最大高度或scaley（）等，以使高度转换为所需的东西。用CSS转换为自动的实际高度是不可能的，但是将内容转换为“ IS”中的内容，因此是字体大小的过渡。

  • 注意 - Codepen中有JavaScript，但唯一的目的是在手风琴上单击时添加/删除CSS类。这可以通过隐藏的无线电按钮来完成，但是我并不专注于高度转换。

我了解这个问题要求没有JavaScript的解决方案。但是对于那些感兴趣的人来说，这是我的解决方案，只需使用一点JS。

好的，所以默认情况下的高度会更改为元素的CSS height: 0; 开放时 height: auto;. 。它也有 transition: height .25s ease-out;. 。但是，问题当然是它不会过渡到或从 height: auto;

所以我所做的是打开或关闭时将高度设置为 scrollHeight 元素的属性。这种新的内联风格将具有更高的特异性，并覆盖两者 height: auto; 和 height: 0; 过渡运行。

打开时，我添加一个 transitionend 事件侦听器将仅运行一次，然后删除内联样式将其设置为 height: auto; 在必要时，这将使元素可以调整大小，例如在这个更复杂的示例中 https://codepen.io/ninjabonsai/pen/gzyyve

关闭时，我立即删除直列样式 事件循环 通过无延迟使用SettiMeout循环。这表示 height: auto; 被暂时覆盖，这使过渡回到 height 0;

const showHideElement = (element, open) => {
  element.style.height = element.scrollHeight + 'px';
  element.classList.toggle('open', open);

  if (open) {
    element.addEventListener('transitionend', () => {
      element.style.removeProperty('height');
    }, {
      once: true
    });
  } else {
    window.setTimeout(() => {
      element.style.removeProperty('height');
    });
  }
}

const menu = document.body.querySelector('#menu');
const list = document.body.querySelector('#menu > ul')

menu.addEventListener('mouseenter', () => showHideElement(list, true));
menu.addEventListener('mouseleave', () => showHideElement(list, false));
#menu>ul {
  height: 0;
  overflow: hidden;
  background-color: #999;
  transition: height .25s ease-out;
}

#menu>ul.open {
  height: auto;
}
<div id="menu">
  <a>hover me</a>
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

如果杰克的最大高度解决方案效果很好，如果所提供的硬编码的最大高点值不比实际高度大得多（否则，存在不良的延迟和正时问题）。另一方面，如果意外的硬编码值不大于实际高度，则元件不会完全打开。

以下CSS仅解决方案还需要硬编码的尺寸，该尺寸应该比大多数发生的真实尺寸大。但是，如果实际尺寸在某些情况下大于硬编码的大小，则该解决方案也可以工作。在这种情况下，过渡可能会有点跳跃，但是它永远不会留下部分可见的元素。因此，该解决方案也可以用于未知内容，例如来自数据库，您只知道内容通常不大于X像素，但是有例外。

想法是为边距底（或略有不同动画的保证金顶）使用负值，并将内容元素放入带有溢出的中间元素中：隐藏。内容元素的负缘因此降低了中间元素的高度。

以下代码使用边距从-150px到0px的过渡。只要内容元素不高于150px，仅此功能就可以正常工作。此外，它在中间元素的最大高度上使用了从0px到100％的过渡。如果内容元素高于150px，则最终隐藏了中间元素。对于Max-Height，过渡仅用于关闭时将其应用程序延迟一秒钟，而不是为了平滑的粘性效果（因此它可以从0px到100％）。

CSS：

.content {
  transition: margin-bottom 1s ease-in;
  margin-bottom: -150px;
}
.outer:hover .middle .content {
  transition: margin-bottom 1s ease-out;
  margin-bottom: 0px
}
.middle {
  overflow: hidden;
  transition: max-height .1s ease 1s;
  max-height: 0px
}
.outer:hover .middle {
  transition: max-height .1s ease 0s;
  max-height: 100%
}

html：

<div class="outer">
  <div class="middle">
    <div class="content">
      Sample Text
      <br> Sample Text
      <br> Sample Text
      <div style="height:150px">Sample Test of height 150px</div>
      Sample Text
    </div>
  </div>
  Hover Here
</div>

边距底部的值应为负，并且尽可能接近内容元素的实际高度。如果（absoute值）更大，则与最大高度解决方案相似的延迟和正时问题，但是只要硬编码大小不比真实的解决方案大。如果保证底的绝对值小于触摸术的实际高度。在过渡后的任何情况下，内容元素要么被充分显示或完全删除。

有关更多详细信息，请参见我的博客文章 http://www.taccgl.org/blog/css_transition_display.html#combined_height

似乎没有适当的解决方案。 max-height 方法非常好，但对于隐藏阶段来说不能很好地工作 - 除非您知道内容的高度，否则将会有明显的延迟。

我认为最好的方法是使用 max-height 但 仅在演出阶段. 。并且不使用任何动画藏身。在大多数情况下，这不应该至关重要。

max-height 应设置为非常巨大的价值，以确保任何内容符合任何内容。动画速度可以使用 transition 期间 （speed = max-height / duration）。速度不取决于内容的大小。显示整个内容所需的时间将取决于其大小。

document.querySelector("button").addEventListener(
  "click", 
  function(){
    document.querySelector("div").classList.toggle("hide");
  }
)
div {    
    max-height: 20000px;
    transition: max-height 3000ms;
    overflow-y: hidden;
}

.hide {
    max-height: 0;
    transition: none;
}
<button>Toggle</button>
<div class="hide">Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. 
</div>

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top