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

【问题标题】：Inconsistent transition speed when div heights are differentdiv高度不同时的过渡速度不一致
【发布时间】：2021-08-06 11:28:59
【问题描述】：

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

所以如果我希望过渡速度相同，我是否需要一个 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（可视化开发工具）上构建它，所以我没有完全访问动画代码的权限。

【问题讨论】：

标签： jquery css animation css-animations

【解决方案1】：

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

【讨论】：