CSS转换立即进入最终状态

Question

我在自动启动CSS转换时遇到问题。通常，这是通过向正在设置动画的元素添加类来完成的。我正在通过jQuery动态地创建我的元素。当在创建元素后立即添加类时，它会立即进入最终状态而不进行转换。只有当我添加一个短暂的延迟时，它才有效。不太好，可以换一种方式吗？

function startbullet() {
    var bullet = $('<div class="bullet"></div>');
    $("#wrapper").append(bullet);
    setTimeout(function () { bullet.addClass("animate"); }, 10);
}
setInterval(startbullet, 2000);

#wrapper {
    height: 400px;
    position: relative;
}
.bullet {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
    height:  20px;
    background-color: #0ff;
    border-radius: 10px;
    transition-duration: 5s;
    transition-timing-function: linear; 
}
.bullet.animate {
    top: 150px;
    left: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="wrapper">
</div> <!-- end wrapper -->

Answer 1

您可以使用关键帧动画而不是过渡，如下所示：

.bullet.animate {
  animation-name: bulletIn;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}
@keyframes bulletIn {
  0%   { top: 10px; left: 10px; }
  100% { top: 150px; left: 400px; }
}

给你一把小提琴https://jsfiddle.net/e3hqghv3/

Answer 2

根据这篇博客文章，你可以在添加类之前调用window.getComputedStyle来强制重绘，我想这是由jquery的animate函数在后台完成的。

function startbullet() {
  var bullet = $('<div class="bullet"></div>');
  $("#wrapper").append(bullet);
  window.getComputedStyle(bullet.get(0)).top;
  bullet.addClass("animate");
}

Answer 3

在添加类之前使用jQuery.animate

function startbullet() {
  var bullet = $('<div class="bullet"></div>');
  $("#wrapper").append(bullet);
  bullet.animate().addClass("animate");
}
setInterval(startbullet, 2000);

 #wrapper {
   height: 400px;
   position: relative;
 }
 .bullet {
   position: absolute;
   top: 10px;
   left: 10px;
   width: 20px;
   height: 20px;
   background-color: #0ff;
   border-radius: 10px;
   transition-duration: 5s;
   transition-timing-function: linear;
 }
 .bullet.animate {
   top: 150px;
   left: 400px;
 }

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