1

私はdivにこのコードを与えました

min-width: 200px;
width: auto;
transition: all 2s;
-webkit-transition: all 2s;

jQuery append を使用してこの div にさらにテキストを追加すると、div が新しい高さにアニメーション化されないのはなぜですか?

これはcss3で可能ですか？
EDIT
これは絶対divであり、違いを生む可能性があります

4

4 に答える 4

2

問題は、高さプロパティが「自動」に設定されていて、「自動」のままになっていることだと思います。したがって、ある状態から別の状態への遷移はありません。おそらく、絶対的な高さを設定し、テキストを追加するたびに css の高さプロパティにピクセルを追加する必要があります。

于 2013-10-09T20:15:47.177 に答える
1

CSS3 トランジションは、 「長さ、パーセンテージ、または計算」値heightに対してのみ有効にできます。CSS3 でこれを行う場合は、高さを明示的に設定または計算する必要があります。それ以外の場合は、jQuery を使用してアニメーション化し、次のようにします。

var old = $el.css('height');
$el.css('height', '');
$el.append('text');
var newH = $el.innerHeight();
$el.css('height', old);
if(old != newH)
    $el.animate({'height': newH}, 'fast');
于 2013-10-09T20:24:03.197 に答える
0

var myStr= '追加するテキスト'; // パラメータはミリ秒単位で指定できます。

$(myStr).appendTo('#containerDiv').slideDown('slow'); // これで動作します。

于 2013-10-10T03:19:20.393 に答える
0

css3 でこれを行う方法はわかりませんが、jQuery での例があります。

http://jsfiddle.net/T5aEw/1/

追加時にスライドさせるには、最初に追加されたアイテムを非表示にしてから、最後に追加された要素display:blockを呼び出す必要があります。.slideDown

于 2013-10-09T20:13:01.393 に答える