なぜクロム（と多分サファリ）だけがトランジション（高さ、幅）でうまくいくのですか？

Question

私はスムーズに（高さが大きくなります）伸びテキストエリア、持っている：スムーズに伸びて（と私が欲しいもの、あまりにも<textarea>、）が、オペラやFirefoxでスムーズに伸びる<textarea><div>クロームで、だから、

<style type="text/css"> 
textarea { 
    height:20px; 
    width:170px; 
    transition-property: all 0.2s linear; /* PS: I don't want to write all prefixes in this question */ 
} 
    textarea:focus { 
    height:30px; 
} 
</style> 
<div style="overflow:hidden;"><!--And some good styles--> 
    <textarea style="resize:none;padding:10px;"></textarea> 
</div> 

を、しかし、 <div>はありません。

私は<div>にトランジションを追加しようとしましたが、結果なし...

はこれの解決策はありますか？ （PS：javascriptで解決するにはいくつかのアイデアがあります：<div> onfocusにクラスを追加するだけですが、jsなしで解決することはできますか？）

Answer 1

だから私はこれをやった： textareaとblurについて：<div>からクラス "active"を削除してください。このクラスが行うすべての変換は、

div { 
    height: 20px; 
    transition: all 0.2s linear; 
} 
div textarea { 
    height: 10px; 
    transition: all 0.2s linear; 
} 
div.active textarea { 
    height:30px; 
} 
div.active { 
    height:40px 
} 

非常にうまくいきます。