Question

我尝试在动态文本区域添加一些动画，但它不起作用。任何人都可以告诉如何解决它？这是我的情景。最初我想看到一个带有一些行的文本区域（让我们占用3行），然后在我开始编写它应该长大之后，让我们从另一行说出来......就像我需要的那样每当我去一个新线路时扩展该区域。就像那样，当我在那里删除一些行时，文本区域的高度也应该减少。在我的代码片段中，这些代码正常但没有动画。我需要为展开和折叠部分添加相同的动画。

以下是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

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>

Answer 2

尝试使用jquery .css

尝试下面的代码。

＆＃13;

$(function() {
  setTimeout(function() {
    $("#text").css("height", "300");
  }, 1000);
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text" style="overflow:hidden; width:300px; height:200px; border:1px black dashed"></textarea>

＆＃13;

Answer 3

以下是Michael Coker's answer的构建。检查scrollHeight是否大于offsetHeight。

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

textarea {
  height: 20px;
  -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>

<强>更新

我认为实现目标的最简单方法是在contenteditable内创建div div，其样式看起来像textarea。

function textAreaAdjust(element) {
	// increase height by 25 of #textarea div (parent element to #text div) if #textarea scrollHeight is greater than offsetHeight
  if (element.parentElement.scrollHeight > element.parentElement.offsetHeight) {
  	element.parentElement.style.height = (25 + element.parentElement.scrollHeight)+"px";
  }
  // decrease height by 25 of #textarea div if #textarea scrollHeight is greater than scrollHeight+25 of #text div
  if (element.parentElement.scrollHeight > element.scrollHeight + 25) {
  	element.parentElement.style.height = (element.scrollHeight)+"px";
  }
}

#textarea {
  width: 180px;
  background: #FFF;
  border: 1px solid lightgrey;
  height: 20px;
  -webkit-transition: height 0.2s ease;
	-moz-transition: height 0.2s ease;
	transition: height 0.2s ease;
}

#text:focus {
  outline: 0px solid transparent;
}

<div id="textarea">
  <div id="text" onkeyup="textAreaAdjust(this)" contenteditable="true"></div>
</div>

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

3 个答案: