特定のアクションでjavascriptを使ってcssアニメーションを実行

Question

テキストエリア要素に自動拡張アニメーション効果のクラスを追加しようとしています。

デモ： 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

多分あなたは、あなたがおよそtransitionとmax-height CSS属性を気にする必要があるだけで、純粋なCSSであなたがそれを行うことができ、これを行うには、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'; 
 
    
 
    
 
}

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>