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

在添加类

之前使用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>

Answer 3

根据this blog post，您可以在添加类之前调用window.getComputedStyle来强制重绘，我想这是通过jquery的animate函数在引擎盖下完成的。

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

CSS转换立即进入最终状态

3 个答案: