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

Question

我试图为autogrow动画效果添加一个类到textarea元素。

演示： 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'; 


} 

我如何可以切换仅在高度被触发动画？ 东西沿着这条线：

this.classList.toggle("horizTranslate") 

，但我怎样检测时，高度改变？

Answer 1

也许你不需要，JS做到这一点，用纯CSS你可以做到这一点，唯一与你需要关心transition和max-height css属性。

我刚刚在示例中修改了你的代码，希望我能帮到你。

请参阅下面的代码。

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'; 
 
    
 
    
 
}

textarea { 
 
    max-height: 40px; 
 
    height: 500px; 
 
    transition: max-height 0.5s; 
 
    appearance: none; 
 
    -webkit-appearance: none; 
 
    border: 1px solid rgba(0, 0, 0, 0.5); 
 
    border-radius: 3px; 
 
    padding: .5em; 
 
    font-size: 1em; 
 
} 
 

 
textarea:focus { 
 
    background: orange; 
 
    height: 200px; 
 
    max-height: 200px; 
 
} 
 

 
body { 
 
    font-family: sans-serif; 
 
    font-size: 16px; 
 
}

<textarea class="horizTranslate" placeholder="Type, paste, cut text here..."></textarea>