我正在尝试使用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>
我结合了最大高度和负边距来实现这个动画。
我使用了最大高度:2000px,但如果需要,您可以将该值设置为更高的值。我为展开时的最大高度和折叠时的边距设置动画。
js部分只是点击,对于纯css解决方案,可以用:hover或checkbox替换。
到目前为止,我只能看到两个问题,
过渡时间有限。(我只添加了2次计时)如果在下拉列表折叠时再次单击,它将跳转。
这是结果
[…document.querySelectorAll('.ab')].forEach(包装器=>{wrapper.addEventListener('click',函数(){this.classList.tggle('active');});});* {边距:0;框大小调整:边框框;}.c文件{溢出:隐藏;}.个项目{宽度:100%;可见性:隐藏;最大高度:0;边距底部:-2000px;-webkit过渡:边缘0.6s立方bezier(1,0,1,1),最大高度0s 0.6s线性,可见性0s 0.6s直线;过渡:边缘0.6s立方贝塞尔(1,0,1,1),最大高度0.6s线性,可见性0.6s线性;}.项>*{填充:1rem;背景色:#ddd;-webkit过渡:背景色0.6s轻松;过渡:背景色0.6s轻松;}.items>*:悬停{背景色:#eee;}.ab文件{填充:1rem;光标:指针;背景:#eee;}.ab活动+.c.项目{最大高度:2000px;边距底部:0;可见性:可见;-webkit过渡:最大高度0.6s立方bezier(1,0,1,1);过渡:最大高度0.6s立方bezier(1,0,1,1);}下拉列表{右边距:1rem;}.包装器{显示:-webkit框;显示:柔性;}<div class=“wrapper”><div class=“下拉列表”><div class=“ab”>仅文本</div><div class=“ab”>仅文本</div><div class=“ab”>下拉列表</div><div class=“c”><div class=“items”><p>项目</p><p>项目</p><p>项目asl;dk l;卡斯尔;d sa;lk语言</p><p>项目sal;千分之三</p><p>项目</p></div></div><div class=“ab”>仅文本</div><div class=“ab”>仅文本</div></div><div class=“下拉列表”><div class=“ab”>下拉列表</div><div class=“c”><div class=“items”><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p></div></div><div class=“ab”>text</div></div><div class=“下拉列表”><div class=“ab”>占位符</div><div class=“ab”>下拉列表</div><div class=“c”><div class=“items”><p>项目</p><p>项目</p></div></div><div class=“ab”>占位符</div><div class=“ab”>占位符</div><div class=“ab”>占位符</div></div></div><h1>要推送的文本</h1>
此解决方案使用了一些技术:
填充底部:100%“hack”,其中百分比是根据元素的当前宽度定义的。有关此技术的更多信息。浮动收缩包装,(需要额外的div来应用浮动清除黑客)非语义使用https://caniuse.com/#feat=css-编写模式和一些转换来撤销它(这允许在垂直上下文中使用上面的填充黑客)
结果是,我们只使用CSS实现了高性能的转换,并使用一个转换函数来平滑地实现转换;圣杯!
当然,这也有缺点!我无法确定如何控制内容被截断的宽度(溢出:隐藏);由于衬垫底部的裂缝,宽度和高度密切相关。不过,也许有办法,所以我们会回到过去。
https://jsfiddle.net/EoghanM/n1rp3zb4/28/
正文{填充:1em;}.触发器{字号:粗体;}/*.扩展器仅用于浮动清除*/.扩展器::之后{内容:“”;显示:表格;清晰:两者都有;}.外部{float:左;/*目的:收缩以适应内容*/边框:1px实心绿色;溢出:隐藏;}.内部{过渡:填充底部0.3s,方便进出;/*或者你能想出的任何疯狂的转换函数*/底部填充:0%;/*填充百分比是根据宽度定义的。此级别的宽度等于内容的高度*/高度:0;/*不幸的是,书写模式的改变还有其他的不良影响,比如光标的方向*/写入模式:垂直rl;光标:默认值;/*不需要垂直文本(横向工字梁)*/变换:旋转(-90度)平移X(-100%);/*撤消写入模式*/变换原点:0 0;边距:0;/*此处的左/右边距将增加高度*/}.inter>div{white-space:nowrap;}.extender:hover.intern,/*在展开时保持打开*/.t触发器:悬停+扩展器.内部{填充底部:100%;}<div class=“trigger”>HoverMe</div><div class=“扩展器”><div class=“outer”><div class=“inner”><div>第一项</div><div>内容</div><div>内容</div><div>内容</div><div>长内容不能宽于外部高度,不幸的是</div><div>最后一项</div></div></div></div><div>在内容之后</div></div>
使用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上重复)