在特定動作上用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>