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

其他回答

我使用的方法是基于字体大小(使用em作为单位)或至少是影响我们想要动画的框的垂直大小的所有内容。然后,如果有任何东西不是以em为单位(例如1px边框),我会在框关闭时将其设置为0,并将所有子对象设置为*。

动画动画显示的是从0到100的字体大小(%)。什么?父级的已知字体大小。

它工作的规则是,动画框中的所有内容必须:

对所有字体大小和行高使用%将em用于所有垂直方向(如高度、边距和顶部/底部填充等)如果将px用于垂直的内容(例如,边框顶部/底部),则在框关闭时应覆盖该内容(例如:边框顶部:0;边框底部:0;)

在某种程度上,您仍然可以使用像素作为参考单位,只需将包装字体大小设置为100px,例如#page{font-size:100px;},因此如果您希望在内部任何地方使用10px,则可以使用0.1em。

这不是任何人都能写的最漂亮的东西,但嘿,这些浏览器并不能为我们提供任何解决这个问题的漂亮方案。一旦箱子的高度无法预测,我们别无选择,只能弄得有些脏,这是我想到的最不脏的东西。

悬停版本:

https://jsfiddle.net/xpsfkb07/1/

#第页{字体大小:calc((35vw+65vh)/30);/*只是一些响应性设计作为奖励*/}#滑动轴承箱{背景色:#e8e8e8;可见性:隐藏;字号:0;/*从0到100%设置动画*/不透明度:0;/*可选的*/过渡:0.5s;}a#ahover:悬停~#slidebox{可见性:可见;字体大小:100%;/*从0到100%设置动画*/不透明度:1;/*可选的*/}a#ahover:not(:hover)~#slidebox*{边框顶部:0;边框底部:0;/*在这里放置任何以像素为单位的垂直线,在本例中为边框*/}a#按钮{显示:内联flex;对齐项目:居中;对齐内容:中心;位置:相对;宽度:20em;高度:3em;填充:0.5em;边框:2px实心#0080ff;边界半径:0.4em;背景色:#8fbfef;颜色:#404040;框大小调整:边框框;}#某种形式的{页边距:1em;边距底部:1em;填充:1 m 4 m 1 m 4 mm;背景色:#d8ffd8;边框:1px实心#888888;}#某种形式的输入{显示:内联块;框大小调整:边框框;字体大小:125%;填充:0.5em;宽度:50%;/*任何水平的都可以是px或%*/边界半径:0.4em;边框:1px纯红色;}<div id=page><a id=ahover href=“#”>悬停我</a><br>下面是滑动框:<div id=slidebox>我是幻灯片框的内容(第1行)<br>我是幻灯片框的内容(第2行)<br><a id=button href=“#”>我是幻灯片框中的某个按钮</a><br>我是幻灯片框的内容(第3行)<br>我是幻灯片框的内容(第4行)。<div id=someform>一个有表格的盒子<br><输入类型=文本值=“文本框”></div>我是幻灯片框的内容(第5行)<br>我是幻灯片框的内容(第6行)。</div>这是在盒子后面。</div>

类别更改版本:

https://jsfiddle.net/8xzsrfh6/

const switch_ele=文档.getElementById('aclass');switch_ele.addEventListener('click',函数(){const box_ele=文档.getElementById('slidebox');box_ele.className=box_ele_className=='显示'?'hide':'显示';},true);#第页{字体大小:calc((35vw+65vh)/30);/*只是一些响应性设计作为奖励*/}#滑动轴承箱{背景色:#e8e8e8;可见性:隐藏;字号:0;/*从0到100%设置动画*/不透明度:0;/*可选的*/转换:.5s;}#幻灯片放映{可见性:可见;字体大小:100%;/*从0到100%设置动画*/不透明度:1;/*可选的*/}#幻灯片隐藏*{边框顶部:0;边框底部:0;/*在这里放置任何以像素为单位的垂直线,在本例中为边框*/}a#按钮{显示:内联flex;对齐项目:居中;对齐内容:中心;位置:相对;宽度:20em;高度:3em;填充:0.5em;边框:2px实心#0080ff;边界半径:0.4em;背景色:#8fbfef;颜色:#404040;框大小调整:边框框;}#某种形式的{页边距:1em;边距底部:1em;填充:1 m 4 m 1 m 4 mm;背景色:#d8ffd8;边框:1px实心#888888;}#某种形式的输入{显示:内联块;框大小调整:边框框;字体大小:125%;填充:0.5em;宽度:50%;/*任何水平的都可以是px或%*/边界半径:0.4em;边框:1px纯红色;}<div id=page><a id=aclass href=“#”>开关类w/js</a><br>下面是滑动框:<div id=slidebox class=hide>我是幻灯片框的内容(第1行)<br>我是幻灯片框的内容(第2行)<br><a id=button href=“#”>我是幻灯片框中的某个按钮</a><br>我是幻灯片框的内容(第3行)<br>我是幻灯片框的内容(第4行)。<div id=someform>一个有表格的盒子<br><输入类型=文本值=“文本框”></div>我是幻灯片框的内容(第5行)<br>我是幻灯片框的内容(第6行)。</div>这是在盒子后面。</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>

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

当其中一个高度为自动时,当前无法在高度上设置动画,必须设置两个显式高度。

此解决方案使用了一些技术:

填充底部: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>

我结合了最大高度和负边距来实现这个动画。

我使用了最大高度: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>