今天遇到个小问题 大概要实现类似手风琴的效果
本来设计是定死的高度,直接 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之和来作为父元素的高度即可