据我所知，这是多种因素的结合。
对于1.2和1.3的任何行高，我都会出现一些抖动。
据我所知，这是由于在过渡期间对每个渲染的小数位置进行舍入而导致的。小数位置的舍入将由高度不是非整数量而导致，因为它将文本向下推，并且文本行位置是非整数量。
高度将是一个非整数值，具体取决于步长大小。“ease”使用默认的三次贝塞尔函数，这将产生分数高度步长，也会随时间变化。这将添加到非整数行高度（x 1用于线1，x 2用于线2，等等）将导致视口中的绘制位置将根据舍入而来回跳跃，其对于每个过渡步骤和对于每一行文本几乎肯定是不同。
在我看来，最好的结果是整数行高，比如说1.2，高度从20px变化到120px，转换定时函数为步长（100），也就是说每行文本在位置上以整数个像素呈现。

晃动效果很可能是由于分数行高会导致元素高度不一致。当元素高度更改时，其中的文本可能无法精确定位，这可能会导致您看到的晃动效果。
解决此问题的一种方法是为文本设置一致的非分数行高。这将确保元素始终处于相同的高度，从而阻止抖动效果。为此，可以将行高属性设置为整数值（如1.0或1.2），而不是分数值（如1.3）。
解决这个问题的另一个方法是使用CSS属性“box-sizing”来明确指定元素的尺寸。这将给予您可以更精确地控制元素的高度，并停止摇晃效果。您可以像这样使用box-sizing属性：

.hover {
height: 20px;
overflow: hidden;
transition: height 1s ease;
box-sizing: border-box;
}

这将确保.hover元素的高度始终保持在20 px，而不考虑其中文本的计算行高。这将防止您看到的抖动效果。

据我所知，这是多种因素的结合。
对于1.2和1.3的任何行高，我都会出现一些抖动。
据我所知，这是由于在过渡期间对每个渲染的小数位置进行舍入而导致的。小数位置的舍入将由高度不是非整数量而导致，因为它将文本向下推，并且文本行位置是非整数量。
在我看来，最好的结果是整数行高，比如说1.2，高度从20px变化到120px，转换定时函数为步长（100），也就是说每行文本在位置上以整数个像素呈现。