我正在尝试使用CSS转换制作一个<ul>幻灯片。

<ul>开始于高度:0;。悬停时,高度设置为height:auto;。然而,这导致它简单地出现,

如果我从高度做:40px;至高度:自动;,那么它将向上滑动到高度:0;,然后突然跳到正确的高度。

如果不使用JavaScript,我怎么能做到这一点?

#子0{高度:0;溢出:隐藏;背景色:#dedede;-moz过渡:高度1s容易;-webkit过渡:高度1s轻松;-o过渡:高度1s容易;过渡:高度1s;}#parent0:悬停#child0{高度:自动;}#孩子40{高度:40px;溢出:隐藏;背景色:#dedede;-moz过渡:高度1s容易;-webkit过渡:高度1s轻松;-o过渡:高度1s容易;过渡:高度1s;}#parent40:悬停#child40{高度:自动;}h1小时{字号:粗体;}两个CSS片段之间的唯一区别是一个高度为0,另一个高度是40。<小时><div id=“parent0”><h1>将我悬停(高度:0)</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div><小时><div id=“parent40”><h1>将我悬停(高度:40)</h1><div id=“child40”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>


当前回答

对于每个状态,使用具有不同过渡缓和和延迟的最大高度。

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/

其他回答

我能够做到这一点。我有一个.child和一个.parent div。子div完全符合父div的宽度/高度,具有绝对定位。然后设置平移属性的动画,将其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 */
}

您可以在.parent上指定一个高度,单位为px,%,或保留为auto。这个div然后在向下滑动时屏蔽掉.child div。

没有最大高度,使用相对定位,在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>

我意识到这条线索已经过时了,但它在某些谷歌搜索中排名靠前,所以我认为它值得更新。

还可以只获取/设置元素自身的高度:

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

您应该在内联脚本标记中的target_box结束标记之后立即转储此Javascript。

仅限CSS的灵活高度解决方案

我偶然发现了一个使用灵活行为的奇怪解决方案。它至少适用于Chrome和Firefox。

首先,高度转换仅在0和100%之间有效,两个数值。由于“auto”不是数值,因此分数在0和“自动”之间不存在增量。100%是灵活的值,因此不需要特定高度。其次,隐藏内容的外部容器和内部容器都必须设置为display:flex with flex direction:column。第三,外部容器必须具有高度属性。仅当所有内容都包含在外部容器中时,将其设置为0才能保持平滑过渡,因为弯曲行为优先于高度。Edit:Json建议使用height:fit内容,这样容器下面的任何内容都会被向下推。

.外部容器{高度:0;显示:flex;flex方向:列;}.内部容器{display:flex;flex direction:column;}.隐藏内容{高度:0;不透明度:0;过渡:高度1s 0.5s进出,不透明度0.5s进出;/*过渡淡出:首先淡出不透明度,然后在延迟等于不透明度持续时间后收缩高度*/}.t触发器:悬停+.内部容器>.隐藏内容{高度:100%;不透明度:1;过渡:高度1s进出,不透明度0.5s 1s进出;/*过渡:首先展开高度,然后在等于高度持续时间的延迟后淡入不透明度*/}<div class=“outer container”><a href=“#”class=“trigger”>悬停以显示内部容器的隐藏内容</a><div class=“内部容器”><div class=“hidden content”>这是隐藏内容。当由悬停触发时,其高度从0过渡到100%,这会将同一容器中的其他内容逐渐向下推</分区><div>在同一个容器中,当隐藏内容的高度从0过渡到100%时,其他内容会逐渐向下推</分区></div></div>

按“运行代码段”按钮查看正在运行的转换。它只是CSS,没有特定的高度。

您可以从height:0转换到height:auto,前提是您还可以提供最小高度和最大高度。

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

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