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/

包装课程更改

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

请勿在页面加载时更改top，如：

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

Answer 3

您可以使用CSS animation和@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>

添加元素与位置绝对的转换

3 个答案: