我正在尝试使用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>
每当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%演示过渡高度:添加子对象时自动
似乎没有合适的解决方案。最大高度方法非常好,但在隐藏阶段效果不佳-除非你知道内容的高度,否则会有明显的延迟。
我认为最好的方法是使用最大高度,但仅限于表演阶段。不要在隐藏时使用任何动画。在大多数情况下,这并不重要。
最大高度应该设置为一个非常大的值,以确保任何内容都适合。可以使用过渡持续时间控制动画速度(速度=最大高度/持续时间)。速度不取决于内容的大小。显示整个内容所需的时间将取决于其大小。
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>
你可以,用一点非语义的小把戏。我通常的方法是设置外部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>
我的解释是,动画运行需要明确的高度。当高度(起始高度或结束高度)为自动时,无法获得高度动画。