div 高度不同时的过渡速度不一致

Question

我正在尝试创建这个动画，点击按钮时会显示不同的段落。 但似乎即使两个元素的持续时间相同，过渡速度也会有所不同，因为段落显然可以更长或更短。在下面的屏幕录像中，你可以看到我想做的事情。

因此，如果我希望过渡速度相同，我是否需要一个 jquery/JS 脚本来获取较长段落的父级 div 高度并将其应用于另一个 div ？ 或者有没有其他方法可以让转换速度一样？

段落包装器具有不同高度时速度不一致 https://s3.tenten.co/share/Screen-Recording-2021-08-06-at-18.59.01.mov

段落包装器具有相同高度时的一致速度 https://s3.tenten.co/share/Screen-Recording-2021-08-06-at-18.59.54.mov

ps：我在 webflow（可视化开发工具）上构建它，所以我没有完全访问动画代码的权限。

Answer 1

动画速度通常设置为以秒为单位的时间间隔，即以2秒为单位执行动画，并根据高度设置移动速度，以便在指定时间内完成过渡，从而在你正在经历的行为中。因此，正如您所说，解决方案是获取 div 高度并将其应用于另一个 div 以获得相同的过渡速度。你可以使用 jQuery 的 height() 函数来做到这一点（this 是一个小的解释，以备不时之需）。然后你也用JS修改其他divs的高度。