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


当前回答

可以通过使用片段路径创建反向(塌陷)动画来实现这一点。

#子0{显示:无;}#parent0:悬停#child0{显示:块;动画:高度动画;动画持续时间:200ms;动画计时功能:线性;动画填充模式:向后;动画迭代次数:1;动画延迟:200ms;}@关键帧高度动画{0% {剪辑路径:多边形(0%0%,100%0.00%,100%0%,0%0%);}100% {剪辑路径:多边形(0%0%,100%0.00%,100%100%,0%100%);}}<div id=“parent0”><h1>将我悬停(高度:0)</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>

其他回答

可以通过使用片段路径创建反向(塌陷)动画来实现这一点。

#子0{显示:无;}#parent0:悬停#child0{显示:块;动画:高度动画;动画持续时间:200ms;动画计时功能:线性;动画填充模式:向后;动画迭代次数:1;动画延迟:200ms;}@关键帧高度动画{0% {剪辑路径:多边形(0%0%,100%0.00%,100%0%,0%0%);}100% {剪辑路径:多边形(0%0%,100%0.00%,100%100%,0%100%);}}<div id=“parent0”><h1>将我悬停(高度:0)</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>

我的解决方法是将最大高度转换为精确的内容高度,以获得流畅的动画效果,然后使用transitionEnd回调将最大高度设置为9999px,以便内容可以自由调整大小。

var content=$('#content');content.inner=$('#content.inter');//关闭时需要获取内容大小的内部div//css转换回调content.on('transitionEnd-webkitTransitionEnd transitiononend oTransitionEnd-msTransitionEnd',函数(e){if(content.hasClass('open')){content.css('max-height',9999);//尝试将此设置为“无”。。。我敢你!}});$('#toggle').on('click',函数(e){content.tggleClass(“打开关闭”);content.contentHeight=content.outerHeight();if(content.hasClass('closed')){//禁用转换&将最大高度设置为内容高度content.removeClass('transitions').css('max-height',content.contentHeight);setTimeout(函数){//启用和启动转换content.addClass('转换').css({'最大高度':0,“不透明度”:0});}, 10); // 10ms超时是禁用/启用转换的秘密因素//chrome只需要1ms,但FF需要约10ms,否则会在第一部动画中因某种原因而窒息}否则如果(content.hasClass('open')){content.contentHeight+=content.inter.outerHeight();//如果已关闭,请将内部高度添加到内容高度内容.css({'max height':content.contentHeight,“不透明度”:1});}});.转换{过渡:所有0.5秒都是缓进缓出;-webkit转换:所有0.5s都易于输入输出;-moz转换:所有0.5s都易于输入输出;}正文{字体系列:Arial;线高:3ex;}代码{显示:内联块;背景:#fafafa;填充:0 1ex;}#切换{显示:块;填充:10px;边距:10px自动;文本对齐:居中;宽度:30ex;}#内容{溢出:隐藏;边距:10px;边框:1px实心#666;背景:#efefef;不透明度:1;}#内容。内部{填充:10px;溢出:自动;}<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>在<code>height:0</code>和<code>high:auto</code>之间平滑CSS转换</h3><p>一个巧妙的解决方法是使用<code>max-height</code>而不是<code>height</code>,并将其设置为比内容更大的值。问题是浏览器使用此值来计算过渡持续时间。因此,如果您将其设置为<code>max-height:1000px</code>,但内容只有100px高,则动画将快10倍</p><p>另一种选择是使用JS测量内容高度,并转换到固定值,但如果内容发生变化,则必须跟踪内容并手动调整其大小</p><p>此解决方案是两种转换的混合,即转换到测量的内容高度,然后在转换后将其设置为<code>最大高度:9999px</code>,以调整流体内容大小</p></div></div><br/><button id=“toggle”>接受挑战</按钮>

根据MDN Web Docs,CSS转换规范中故意排除了auto值,因此在网格和柔性布局中使用height:100%、top或flex属性,而不是height:auto。

展开/折叠覆盖

.grid容器{显示:栅格;位置:绝对;}.内容{背景:浅绿色;高度:0;溢出:隐藏;过渡:1s;}span:hover+.gridcontainer.content{高度:100%;}<span>悬停在我上方</span><div class=“grid container”><div class=“content”>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕</分区></div><p>其余页面内容</p>

展开/折叠滑动覆盖

.grid容器{显示:栅格;位置:绝对;溢出:隐藏;指针事件:无;/*以实现与容器下方元素的交互*/}.内容{背景:浅绿色;指针事件:自动;位置:相对;顶部:-100%;过渡:1s;}span:hover+.gridcontainer.content{顶部:0;}<span>悬停在我上方</span><div class=“grid container”><div class=“content”>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕</分区></div><p>其余页面内容</p>

在文档流中展开/折叠

html格式{显示:栅格;}正文{显示:柔性;弯曲方向:柱;}.内容{背景:浅绿色;弹性基础:0;溢出:隐藏;过渡:1s;}span:悬停+内容{挠曲:1;}<span>悬停在我上方</span><div class=“content”>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕</分区><p>其余页面内容</p>

你可以,用一点非语义的小把戏。我通常的方法是设置外部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>

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

每当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%演示过渡高度:添加子对象时自动