我正在尝试使用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>
您应该改用scaleY。
上一页{背景色:#eee;变换:缩放Y(0);变换原点:顶部;转变:转变0.26s;}p: 悬停~ul{变换:缩放Y(1);}<p>将此悬停</p><ul><li>咖啡</li><li>茶</li><li>牛奶</li></ul>
我在jsfiddle上制作了上述代码的供应商前缀版本,并将jsfiddl更改为使用scaleY而不是height。
编辑有些人不喜欢scaleY如何转换内容。如果这是一个问题,那么我建议使用剪辑。
上一页{剪辑:矩形(自动,自动,0,自动);位置:绝对;边距:-1rem 0;衬垫:.5rem;颜色:白色;背景色:rgba(0、0、0和0.8);过渡特性:剪辑;过渡时间:0.5s;过渡时间函数:立方贝塞尔(0.175、0.885、0.32、1.275);}h3:悬停~ul,h3:活性~ul,ul:悬停{剪辑:矩形(自动,自动,10rem,自动);}<h3>悬停在此处</h3><ul><li>此列表</li><li>被剪裁</li><li>剪辑过渡</li><li>将显示它</li></ul><p>一些文本。。。</p>
每当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%演示过渡高度:添加子对象时自动
我结合了最大高度和负边距来实现这个动画。
我使用了最大高度: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>