Open cjfff opened 5 years ago
场景分析
写移动端的页面的时候，有时候我们会需要一个折叠的效果，但是对于目标元素来说，是不能够写死 height 属性值的，因为内联元素中的尺寸 移动端适配插件 不会帮我们转换尺寸 emmmmmm
height
其实这个问题实际等同于：用 CSS 实现由 height:0 到 height:auto 的渐变
但height:auto实际并不是一个具体的值，浏览器在执行该动画时还未取到实际值，因此没有渐变的效果；
解决方案：
我们可以使用 transform: scaleY 从 0 -> 1 的变化来模拟这种效果
默认 transform: scaleY(0)
transform: scaleY(0)
然后展开的时候设置成 transform: scaleY(1)
transform: scaleY(1)
切记时间间隔不要设置太长，不然效果会变得很奇怪
如果贵司要兼容 IE 浏览器的话，还是使用 JS 去模拟吧...
场景分析
写移动端的页面的时候，有时候我们会需要一个折叠的效果，但是对于目标元素来说，是不能够写死
height属性值的，因为内联元素中的尺寸 移动端适配插件 不会帮我们转换尺寸 emmmmmm其实这个问题实际等同于：用 CSS 实现由 height:0 到 height:auto 的渐变
但height:auto实际并不是一个具体的值，浏览器在执行该动画时还未取到实际值，因此没有渐变的效果；
解决方案：
我们可以使用 transform: scaleY 从 0 -> 1 的变化来模拟这种效果
默认
transform: scaleY(0)然后展开的时候设置成
transform: scaleY(1)切记时间间隔不要设置太长，不然效果会变得很奇怪
如果贵司要兼容 IE 浏览器的话，还是使用 JS 去模拟吧...