# 继上次max-height代替height做过渡动画的后续
{% embed url="" %}
{% embed url="" %}
碰到两个问题
第一个问题群里也有小伙伴在问
就是在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%的速度啊
收起大家看就很快了
我们再恢复正常的速度展开收起
这样就很跟手了
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sunzsh.gitbook.io/xiaoshan.bug/ji-shang-ci-maxheight-dai-ti-height-zuo-guo-du-dong-hua-de-hou-xu.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.