我正在尝试使用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/

其他回答

仅限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,没有特定的高度。

每当DOM发生变化时,为跟踪的元素设置style=“”属性。名为变种转换的插件您可以使用CSS进行转换,而不使用黑客。您不必编写任何JavaScript。只需包含JavaScript库并指定要在HTML中查看的属性。你不必使用固定高度的CSS。使用data mutant attributes=“X”设置要跟踪的元素。

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

这使用MutationObserver跟踪DOM中的更改。您不必设置任何内容或使用JavaScript手动设置动画。更改将自动跟踪。然而,由于它使用了MutationObserver,这只会在IE11+中转换。<IE11将看到快照更改(无过渡)。

小提琴手

演示从高度:自动转换到高度:100%演示过渡高度:添加子对象时自动

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

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/

您可以从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;
}

具有行高、填充、不透明度和边距的可选CSS解决方案:

正文{背景色:亚麻;}主要的,主要的{背景色:白色;}[id^=“toggle_”]~.content{线条高度:0;不透明度:0;填充:0.5雷姆;过渡:.2s缓和;}[id^=“toggle_”]~.content>p{边距:0;过渡:.2s缓和;}[id^=“toggle_”]:选中~.content{不透明度:1;衬垫:.5rem;线高:1.5;}[id^=“toggle_”]:选中~.content p{边距底部:.75rem;}[id^=“toggle_”]+标签{显示:柔性;调整内容:间距;衬垫:0.5em 1em;背景:灯光转向蓝;边框底部:1px实心灰色;光标:指针;}[id^=“toggle_”]+标签:之前{content:“显示”;}[id^=“toggle_”]:选中+标签:之前{content:“隐藏”;}[id^=“toggle_”]+标签:之后{内容:“\25BC”;}[id^=“toggle_”]:选中+标签:之后{内容:“\25B2”;}<main><div><input type=“checkbox”id=“toggle_1”隐藏><label for=“toggle_1”hidden></label><div class=“content”><p>Lorem ipsum dolor坐amet,consectetur adipiscing elit。Duis dolor neque,准将leo ut,拍卖人tincidunt mauris。Nunc frigilla tincidunt metus,非孕妇lorem调味品非。Duis ornare purus nisl,位于埃格特拱门。整数lorem ante,porta vulputate dui ut,blandit tempor tellus。Proin facilisis bibendum直径,位于调味品中。Donec volutpat dui eu mollis vulputate。Nunc commodo lobortis Nunc at ultrices。吊耳中的吊耳直径。</p></div></div><div><input type=“checkbox”id=“toggle_2”隐藏><label for=“toggle_2”hidden></label><div class=“content”><p>我不能坐在拍卖行旁边。Vivamus sed nisi vite nibh调味品pulvinar eu vel lorem。生命的前阶段是一个非常容易的阶段。在外的大型流苏。做一个临时自由人。Donec sapien libero,lacinia sed aliquet ut,imperite finibus tellus。努克·泰勒斯·莱图斯,波苏雷侯爵的朗库斯,坦普斯坐在埃尼姆。Morbi等人使用了一种边缘数字丝绒。Donec commodo,est id accumsan cursus,diam dui hendrerit nisi,vel hendreritpurus dolor ut risus。Phasellus mattis egestas ipsum sed ullamcorper。在直径舌中,rhoncus vel enim et,impredite porta justo。Curabitur vulputate hendrerit nisl,et ultricies diam.Maecenas ac leo a diam cursus ornare nec eu quam。</p><p>Sed非vulputate purus,Sed consectetur odio。Sed non-nih frigilla,impressive odio nec,efficitur ex.Suspendiss ut dignissim enim。迈塞纳斯·费利斯·奥古斯特(Maecenas felis augus),坐在埃米特·塞姆·费利利亚(sem frigilla)上,坐在艾姆桑·费利利亚的笔尖上。Quisque posuere lacus tortor,ques malesuada magna elementum a.Nullam id purus in pre terstie tincidunt。Morbi luctus orci eu egestas dignissim。Sed tincidunt,libero quis scelerisque bibendum,ligula nisi gravida libero,id lacinia nulla leo in elit。</p><p>Aenean aliquam risus id consectetur sagitis。Aliquam Aliquam nisl eu预示着诅咒,意味着最大的痛苦。Aliquam ipsum dolor,tempor et justo ac,fermentum mattis dui。伊蒂安在波苏雷舌。Vestibulum tortor metus,viverra vitae mi non,laoret iaculis purus。Praesent vel semper笔尖。Curabitur一只刚果拉库斯。在et pellentesque lorem。Morbi posuere猫科动物,无直径壳核,无壳核。Vivamus ultricies、massa id sagitis consequat、sem mauris tincidunt nunc、eu vehicula augus quam ut mauris。</p></div></div><div><input type=“checkbox”id=“toggle_3”hidden><label for=“toggle_3”hidden></label><div class=“content”><p>Lorem ipsum dolor坐amet,consectetur adipiscing elit。Duis dolor neque,准将leo ut,拍卖人tincidunt mauris。Nunc frigilla tincidunt metus,非孕妇lorem调味品非。Duis ornare purus nisl,位于埃格特拱门。整数lorem ante,porta vulputate dui ut,blandit tempor tellus。Proin facilisis bibendum直径,位于调味品中。Donec volutpat dui eu mollis vulputate。Nunc commodo lobortis Nunc at ultrices。吊耳中的吊耳直径。</p><p>Sed非vulputate purus,Sed consectetur odio。Sed non-nih frigilla,impressive odio nec,efficitur ex.Suspendiss ut dignissim enim。迈塞纳斯·费利斯·奥古斯特(Maecenas felis augus),坐在埃米特·塞姆·费利利亚(sem frigilla)上,坐在艾姆桑·费利利亚的笔尖上。Quisque posuere lacus tortor,ques malesuada magna elementum a.Nullam id purus in pre terstie tincidunt。Morbi luctus orci eu egestas dignissim。Sed tincidunt,libero quis scelerisque bibendum,ligula nisi gravida libero,id lacinia nulla leo in elit。</p></div></div></main>