ダイナミックテキストエリアのアニメーションの追加方法

Question

ダイナミックテキストエリアにアニメーションを追加しようとしましたが、動作しません。誰もそれを修正する方法を教えてもらえますか？ ここは私のシナリオです。最初はいくつかの行のテキスト領域を見たいと思っています（3行を使ってみましょう）。その後、私はそれが成長するはずだと書き始めました。別の行から言えば、いつでもその領域を拡張する必要があります新しい行。ちょうどそのように、私はいくつかの行を削除すると、テキスト領域の高さも削減する必要があります。私のコードスニペットでは、これらは正しく動作していますが、アニメーションはありません。私は拡大して折り畳む部分に同じアニメーションを追加する必要があります。

function textAreaAdjust(element) { 
 
    element.style.height = "auto"; 
 
    element.style.height = (25 + element.scrollHeight) + "px"; 
 
}

textarea { 
 
    -webkit-transition: height 0.2s ease; 
 
    -moz-transition: height 0.2s ease; 
 
    transition: height 0.2s ease; 
 
}

<textarea id="text" rows="3" onkeyup="textAreaAdjust(this)" 
 
      style="overflow:hidden"></textarea>

Answer 1

以下の私のコードを試してみてください

の.css jqueryのを使用してみてください：ここで

はコードがあります。

$(function() { 
 
    setTimeout(function() { 
 
    $("#text").css("height", "300"); 
 
    }, 1000); 
 
});

textarea { 
 
    -webkit-transition: height 0.2s ease; 
 
    -moz-transition: height 0.2s ease; 
 
    transition: height 0.2s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="text" style="overflow:hidden; width:300px; height:200px; border:1px black dashed"></textarea>

Answer 2

あなたはheight: autoから移行することはできません。レンダリングされた高さに基づいて高さを割り当てることができます（これは、高さを計算するために使用しているのでscrollHeightを使用しています）。ここで

var sized = false; 
 
function textAreaAdjust(element) { 
 
    if (!sized) { 
 
    element.style.height = element.scrollHeight + "px"; 
 
    element.style.height = 25 + element.scrollHeight + "px"; 
 
    sized = true; 
 
    } 
 
}

textarea { 
 
    -webkit-transition: height 0.2s ease; 
 
\t -moz-transition: height 0.2s ease; 
 
\t transition: height 0.2s ease; 
 
}

<textarea id="text" rows="3" onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

Answer 3

Michael Coker's answerのオフビルドです。 scrollHeightがoffsetHeightより大きいかどうかを確認します。

function textAreaAdjust(element) { 
 
    if (element.scrollHeight > element.offsetHeight) { 
 
    \t element.style.height = (25 + element.scrollHeight)+"px"; 
 
    } 
 
}

textarea { 
 
    height: 20px; 
 
    -webkit-transition: height 0.2s ease; 
 
\t -moz-transition: height 0.2s ease; 
 
\t transition: height 0.2s ease; 
 
}

<textarea id="text" rows="3" onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

UPDATE

私はあなたが望むものを達成する最も簡単な方法は、textareaのように見えるようにスタイル設定されdivのcontenteditablediv内部を作成することだと思います。

function textAreaAdjust(element) { 
 
\t // increase height by 25 of #textarea div (parent element to #text div) if #textarea scrollHeight is greater than offsetHeight 
 
    if (element.parentElement.scrollHeight > element.parentElement.offsetHeight) { 
 
    \t element.parentElement.style.height = (25 + element.parentElement.scrollHeight)+"px"; 
 
    } 
 
    // decrease height by 25 of #textarea div if #textarea scrollHeight is greater than scrollHeight+25 of #text div 
 
    if (element.parentElement.scrollHeight > element.scrollHeight + 25) { 
 
    \t element.parentElement.style.height = (element.scrollHeight)+"px"; 
 
    } 
 
}

#textarea { 
 
    width: 180px; 
 
    background: #FFF; 
 
    border: 1px solid lightgrey; 
 
    height: 20px; 
 
    -webkit-transition: height 0.2s ease; 
 
\t -moz-transition: height 0.2s ease; 
 
\t transition: height 0.2s ease; 
 
} 
 

 
#text:focus { 
 
    outline: 0px solid transparent; 
 
}

<div id="textarea"> 
 
    <div id="text" onkeyup="textAreaAdjust(this)" contenteditable="true"></div> 
 
</div>