本文探讨了在实现类似bootstrap collapse效果时遇到的问题，即使用`display:none`和`display:block`无法触发transition动画，而`height:auto`同样不支持动画效果。解决方案是使用`max-height`属性，设定一个大于实际高度的值来模拟动画，但这种方法在折叠时可能缺乏动画。另一种方法是借助JavaScript获取元素高度并进行控制，以实现更理想的动画效果。
想实现类似bootstrap中collapse的功能。设置过渡动画的时候发现下面两个问题。
一、使用display:none和display:block是不会有transition动画效果的。
目前display属性不受支持。猜想原因是因为缓动是基于数值和时间的计算(长度，百分比，角度，颜色也能转换为数值)。而display是一个尴尬的属性，该计算什么值实现？
解决方案：利用支持的属性如：opacity: 0，height:0 =>opacity:1, height: 400px(一个确定的数值，不能是auto)
或者 visibility:hidden => visibility:visible 来达到视觉上的隐藏效果。
如果目标元素中有链接之类那么推荐用visibility而不是opacity,因为opaci
最低0.47元/天 解锁文章
扫一扫
1517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
