在特定操作上使用javascript运行css动画

我正在尝试为textarea元素添加自动生长动画效果类

演示：

---

但是我如何检测高度何时发生变化呢？

也许你不需要，JS来做这件事，使用纯css你可以做到，唯一需要关心的是

转换

和

最大高度

css属性

我刚刚修改了示例中的代码，希望能帮助您

请参阅下面的代码

var tx=document.getElementsByTagName（'textarea'）；
/*对于（变量i=0；i

textarea{
最大高度：40px；
高度：500px；
过渡：最大高度0.5s；
外观：无；
-webkit外观：无；
边框：1px实心rgba（0,0,0,0.5）；
边界半径：3px；
填充：.5em；
字号：1em；
}
文本区域：焦点{
背景：橙色；
高度：200px；
最大高度：200px；
}
身体{
字体系列：无衬线；
字体大小：16px；
}

---

触发高度是什么意思？你的意思是当文本区域的文本超过框的高度时？所以在那个演示中，文本区域在添加新文本时会增加。我正试图在那一刻添加一个动画/类，这样文本框就不会跳跃，但它会平滑地改变高度。这有意义吗？嗨，是的，我知道如何添加这样的过渡。问题是，在添加更多角色时，当实际高度调整时，我无法添加相同的动画。你知道我的意思吗？这就是为什么我认为ar是一个JS切换函数。

var tx = document.getElementsByTagName('textarea');
for (var i = 0; i < tx.length; i++) {
  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput(e) {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';


}

this.classList.toggle("horizTranslate")