javascript - 如何为动态文本区域添加动画

Question

我试图向动态文本区域添加一些动画，但它不起作用。谁能告诉我如何解决它？这是我的场景。最初我想看到一个有一些行的文本区域(让我们取 3 行)，然后当我开始写它应该长大时，比方说从另一行开始..就像我需要在我去的时候扩展那个区域一条新线。就像那样，当我在那里删除一些行时，文本区域的高度也应该减少。在我的代码片段中，那些工作正常但没有动画。我需要为展开和折叠部分添加相同的动画。

代码如下:

function textAreaAdjust(element) {
  element.style.height = "auto";
  element.style.height = (25 + element.scrollHeight) + "px";
}

textarea {
  -webkit-transition: height 0.2s ease;
  -moz-transition: height 0.2s ease;
  transition: height 0.2s ease;
}

<textarea id="text" rows="3" onkeyup="textAreaAdjust(this)"
          style="overflow:hidden"></textarea>

Answer 1

您不能从 height: auto 转换。您可以根据呈现的高度分配高度(使用 scrollHeight 因为您正在使用它来计算您想要过渡到的高度)，然后将 25 添加到它并过渡到它。

var sized = false;
function textAreaAdjust(element) {
  if (!sized) {
    element.style.height = element.scrollHeight + "px";
    element.style.height = 25 + element.scrollHeight + "px";
    sized = true;
  }
}

textarea {
  -webkit-transition: height 0.2s ease;
	-moz-transition: height 0.2s ease;
	transition: height 0.2s ease;
}

<textarea id="text" rows="3" onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>