追加された要素のポジションアブソリュートへの遷移

Question

私はこの問題を抱えています。divを50pxの上に追加してから0pxにアニメーションしようとしますが、divが0％に移動してもアニメーションは機能しません。ここで

は非常に簡単なコード

HTML

<div id="toto"></div> 

JS

$('#toto').append('<div id="test" class="test">test</div>'); 
$('#test').css('top', '0px'); 

CSS

0123です

FIDDLE

Link

任意のアイデアどのようにCSSの遷移と移動していますか？ありがとう。

Answer 1

CSSは、変化を引き起こすために一番上の変更にはあまりにも速く適用されています。あなたのようなページロードのtop変更しないでください、高速setTimeout()https://jsfiddle.net/nb0fty1b/1/

$('#toto').append('<div id="test" class="test">test</div>'); 
 
setTimeout(function() { 
 
\t $('#test').css('top', '0px'); 
 
},100);

#toto{ 
 
    display:block; 
 
    min-height:200px; 
 
} 
 
.test{ 
 
    display:block; 
 
    position:absolute; 
 
    transition:all 3s; 
 
    top:50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="toto"> 
 

 
</div>

Answer 2

にクラス変更をラップすることができます：あなたはCSS animationでそれを行うことができ

setTimeout(function(){ 
    $('#test').css('top', 0); 
},2000); 

Answer 3

をし、 @keyframes。作品

$('#toto').append('<div id="test" class="test">test</div>');

#toto { 
 
    min-height: 200px; 
 
    position: relative; 
 
} 
 
.test { 
 
    position: absolute; 
 
    top: 50px; 
 
    animation: move 3s forwards; 
 
} 
 
@keyframes move { 
 
    to { 
 
    top: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="toto"></div>