继上次max-height代替height做过渡动画的后续
最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
碰到两个问题
第一个问题群里也有小伙伴在问
就是在mac系统下没有什么问题
大家看正常的展开
但是呢我们去windows里面
大家仔细看啊
注意
看到了吗
我再来一次
他在展开的过程中呢
他是有这个滚动条的闪现
我们可以把这个动画调慢一点
大家看一下我把它改成1.5秒
好再来一遍
看到了吗
那为什么会这样呢
我们趁它过度的时候
把动画暂停一下
我们首先啊调出这个开发者工具
然后点这点这：More tools
选animations
然后呢我把动画放慢一点25%
然后 点一下，暂停
大家看
现在是有滚动条的而且是能滚动的
所以呢很显然他现在是还没完全展开
但是呢里边内容比较高
那为什么在麦克系统下没问题呢
我们来我们先把这个复制过来看
看一下啊还
是我们调出开发者工具
然后呢More tools ，anmations
注意啊暂停
大家看啊
其实也有滚动条
只是呢在Mac系统下
他这个滚动条如果你不滚动
他默认是隐藏的
所以呢看上去像是没问题
那如果谈到解决方案呢
最好的方法肯定是在
他过度的这个过程中啊
临时的把这个滚动条禁用一下
（就是overflow: hidden）
但是呢
这个方案如果不借用JS是很难做到的
所以呢我想了另一个变相的解决方案 (不是很完美，但大部分情况够用）
什么呢就是我们呀
默认就让他（res的滚动条）这个是隐藏的
只是在他hover的时候呢
把这个overflow改成auto
然后默认的时候他是hidden
我们再试一下
windows
然后呢动画给他恢复一下
刷新好大家看
这就没问题了
我再把动画调快
这样就没问题了
好我们再来看第二个问题
就是我发现啊
当我们拿max-height
来作为过渡动画的时候
虽然视觉上他是展开到这了
但是呢他实际的动画执行是
到你设置的那个值
比如啊我们设置的是80vh
那他80位置呢
假如说是到这个位置
那他动画所消耗的时间呢
就是从这一直到这来计算的
所以呢如果把max-height设的比较大
他展开看不出问题
他在收起的时候他是从这开始收起
等他收起到这的时候
我们才能看出效果
所以呢就会感觉收起的时候有点延迟
我们来试一下啊
我们呢把这个max-height设的大一点
比如200vh
然后0.5过度
好我们来试一下啊
大家看我失去焦点在这点一下
好已经点了
他才收起
所以呢这个问题要想解决的话呢
我们要么就采用js
（先获取内容占用的高度）来直接设置他的height高度
但是呢我还是想尽量用CSS
后来呢
我在网上找到了一个这样的解决方案
我们先把这个复制过来
看一下啊他默认是这个
我把这个默认动画拿过来
0.5秒
同时呢他在打开的这个样式里边
设置了另一个曲线的效果
我们把整个拿过来放过来
一个是0.5秒一个是1秒
我们再回来看一下效果
展开现在是25%的速度啊
收起大家看就很快了
我们再恢复正常的速度展开收起
这样就很跟手了