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


当前回答

在过渡中使用最大高度,而不是高度。并将最大高度的值设置为比您的长方体所能获得的值更大的值。

请参阅Chris Jordan提供的JSFiddle演示。

#菜单#列表{最大高度:0;过渡:最大高度0.15s缓和;溢出:隐藏;背景:#d5d5d5;}#菜单:悬停#列表{最大高度:500px;过渡:最大高度0.25s;}<div id=“menu”><a>悬停我</a><ul id=“list”><!-- 创建一组,或不创建一组li来查看时间。--><li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li></ul></div>

其他回答

你可以,用一点非语义的小把戏。我通常的方法是设置外部DIV的高度动画,该外部DIV有一个子级,这是一个仅用于测量内容高度的无样式DIV。

函数growDiv(){var growDiv=文档.getElementById('grow');if(growtDiv.clientHeight){growtDiv.style.height=0;}其他{var wrapper=document.querySelector('.measureingWrapper');growDiv.style.height=wrapper.clientHeight+“px”;}}#成长{-moz过渡:高度.5s;-ms过渡:高度.5s;-o过渡:高度.5s;-webkit过渡:高度.5s;过渡:高度.5s;高度:0;溢出:隐藏;轮廓:1px纯红色;}<input type=“button”onclick=“growDiv()”value=“grow”><div id='grow'><div class='measureingWrapper'><div>我部门的内容。</div><div>我部门的内容。</div><div>我部门的内容。</div><div>我部门的内容。</div><div>我部门的内容。</div><div>我部门的内容。</div></div></div>

人们希望能够省去.metringWrapper,只需将DIV的高度设置为auto并设置动画,但这似乎不起作用(设置了高度,但没有动画发生)。

函数growDiv(){var growDiv=文档.getElementById('grow');if(growtDiv.clientHeight){growtDiv.style.height=0;}其他{growDiv.style.height=“自动”;}}#成长{-moz过渡:高度.5s;-ms过渡:高度.5s;-o过渡:高度.5s;-webkit过渡:高度.5s;过渡:高度.5s;高度:0;溢出:隐藏;轮廓:1px纯红色;}<input type=“button”onclick=“growDiv()”value=“grow”><div id='grow'><div>我部门的内容。</div><div>我部门的内容。</div><div>我部门的内容。</div><div>我部门的内容。</div><div>我部门的内容。</div><div>我部门的内容。</div></div>

我的解释是,动画运行需要明确的高度。当高度(起始高度或结束高度)为自动时,无法获得高度动画。

无硬编码值。

没有JavaScript。

无近似值。

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

每当您能够复制要设置动画的元素的DOM时,此方法都适用。

.外部{边框:红色虚线1px;位置:相对;}.虚拟{可见性:隐藏;}.真实{位置:绝对;背景:黄色;高度:0;过渡:高度0.5s;溢出:隐藏;}.outer:悬停>.real{高度:100%;}将鼠标悬停在下面的框上:<div class=“outer”><!-- 要设置动画的实际元素--><div class=“real”>不可预测的内容不可预测内容不可预知内容不可预见内容不可预料内容不可预计内容不可预期内容不可预报内容不可预言内容内容不可预测内容不可预知内容</div><!-- 要设置动画的元素的精确副本。--><div class=“dummy”aria hidden=“true”>不可预测的内容不可预测内容不可预知内容不可预见内容不可预料内容不可预计内容不可预期内容不可预报内容不可预言内容内容不可预测内容不可预知内容</div></div>

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

您应该改用scaleY。

上一页{背景色:#eee;变换:缩放Y(0);变换原点:顶部;转变:转变0.26s;}p: 悬停~ul{变换:缩放Y(1);}<p>将此悬停</p><ul><li>咖啡</li><li>茶</li><li>牛奶</li></ul>

我在jsfiddle上制作了上述代码的供应商前缀版本,并将jsfiddl更改为使用scaleY而不是height。

编辑有些人不喜欢scaleY如何转换内容。如果这是一个问题,那么我建议使用剪辑。

上一页{剪辑:矩形(自动,自动,0,自动);位置:绝对;边距:-1rem 0;衬垫:.5rem;颜色:白色;背景色:rgba(0、0、0和0.8);过渡特性:剪辑;过渡时间:0.5s;过渡时间函数:立方贝塞尔(0.175、0.885、0.32、1.275);}h3:悬停~ul,h3:活性~ul,ul:悬停{剪辑:矩形(自动,自动,10rem,自动);}<h3>悬停在此处</h3><ul><li>此列表</li><li>被剪裁</li><li>剪辑过渡</li><li>将显示它</li></ul><p>一些文本。。。</p>

具有行高、填充、不透明度和边距的可选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>