我正在尝试使用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>
似乎没有合适的解决方案。最大高度方法非常好,但在隐藏阶段效果不佳-除非你知道内容的高度,否则会有明显的延迟。
我认为最好的方法是使用最大高度,但仅限于表演阶段。不要在隐藏时使用任何动画。在大多数情况下,这并不重要。
最大高度应该设置为一个非常大的值,以确保任何内容都适合。可以使用过渡持续时间控制动画速度(速度=最大高度/持续时间)。速度不取决于内容的大小。显示整个内容所需的时间将取决于其大小。
document.querySelector(“button”).addEventListener(“点击”,函数(){document.querySelector(“div”).classList.tggle(“hide”);})分区{最大高度:20000px;过渡:最大高度3000ms;overflow-y:隐藏;}.隐藏{最大高度:0;过渡:无;}<button>切换</button><div class=“hide”>Lorem ipsum dolor坐amet,ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no,eam denique sensius et,他的ipsum senserit ne。Lorem ipsum dolor sit amet,ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no,eam denique sensius et,他的ipsum senserit ne。Lorem ipsum dolor sit amet,ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no,eam denique sensius et,他的ipsum senserit ne。Lorem ipsum dolor sit amet,ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no,eam denique sensius et,他的ipsum senserit ne。Lorem ipsum dolor sit amet,ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no,eam denique sensius et,他的ipsum senserit ne。Lorem ipsum dolor sit amet,ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no,eam denique sensius et,他的ipsum senserit ne。Lorem ipsum dolor sit amet,ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no,eam denique sensius et,他的ipsum senserit ne。Lorem ipsum dolor sit amet,ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no,eam denique sensius et,他的ipsum senserit ne。Lorem ipsum dolor sit amet,ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no,eam denique sensius et,他的ipsum senserit ne。</div>