javascript - 具有绝对位置的添加元素的过渡

Question

所以我遇到了这个问题:我将一个 div 附加到顶部 50px 的 div，然后尝试将动画设置为 0px，但动画永远不会工作，即使 div 移动到 0%。

这是非常简单的代码

HTML

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

JS

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

CSS

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

fiddle

Link

知道如何让它随着 CSS 过渡移动吗？谢谢。

Answer 1

CSS 应用速度太快，顶部更改无法触发转换。您可以将类更改包装在快速 setTimeout() https://jsfiddle.net/nb0fty1b/1/ 中

$('#toto').append('<div id="test" class="test">test</div>');
setTimeout(function() {
	$('#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>