关于盒子动态高度与transition的问题

2023-02-21,,

今天遇到个小问题 大概要实现类似手风琴的效果

本来设计是定死的高度,直接 height:0; - > height:xxxpx;但之后要改成动态变化的高度,手风琴展开后是个列表,并且列表每行高度不固定。

开始设置的height:auto,结果发现 transition 过渡 失效了。

百度了下告知用max-height 虽然说实现了过渡效果但是transition是根据所设置的max-height来进行的,就是说如果max-height为1000px 实际盒子 height:200px ,设置 transition:1s的话实际过渡只有0.2s,并不可控。而且收回时候经常过渡失效(

最后自己的实现方案还是用固定的height来做:

给父元素去设置固定的高度 和 overflow:hidden;以及过渡,然后去拿它的children子元素的offsetHeight之和来作为父元素的高度即可

关于盒子动态高度与transition的问题的相关教程结束。

《关于盒子动态高度与transition的问题.doc》

下载本文的Word格式文档,以方便收藏与打印。