javascript - 更新文本时如何CSS过渡P标签的高度？

Question

我在网站上有一个段落标记，我在其中替换了单击按钮时的内容(使用 Javascript)(即:将引号 #1 替换为引号 #2)。我不是简单地扩展当前文本，有时新文本可能比当前文本少，有时更多。

在某些情况下，文本从短到长，这会导致网站上出现相当不稳定的移动，如 <p>标签会立即增加它的高度。

我想通过添加 2s 的 css 过渡可能会解决它，但它没有效果:

p.my-text {
  transition: 2s;
}

有没有办法转换 <p> 的高度文本更新时标签是否流畅？

Answer 1

您不能在 height: auto; 上使用过渡，但您可以在给定的 max-height(例如 0) 和另一个比预期更大的 max-height。参见 https://codepen.io/LFeh/pen/ICkwe