I am attempting to incorporate a class for an autogrow animation effect to a textarea element.
Here is a demo: http://jsfiddle.net/d0kmg7d3/15/
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';
}
How can I trigger the animation only when the height changes? Perhaps something like this:
this.classList.toggle("horizTranslate")
But how can I detect when the height is altered?