Question

我正试图从一个半完成的CSS动画顺利过渡到下一个动画，我找不到一种方法来做到这一点，没有轻微的口吃。我有一个非常高速的无限动画，应该轻轻地减速到停止点击。现在，我在切换动画时总是会收到一些小动作，可能部分是因为我需要在开始下一个动画之前等待下一个requestAnimationFrame。还有其他选择吗？这是我正在做的事情：

function onClick(){
  // get current location of element
  var content = $(".content");
  var currentOffset = $(content[0]).css("top");

  // set property to stop jumping back to the beginning of current animation
  content.css({ top: currentOffset });

  // stop the current animation
  content.removeClass("anim-infinite");

  // update content based on current location
  // updateContent(currentOffset);

  // setup ease-out animation
  window.requestAnimationFrame(function() {
    content.addClass("anim-ease-out");
    content.css({ top: parseFloat(currentOffset) + 50  });    
  });
}

这是相关的CSS。

@keyframes "spin" {
  from { top: 0 };
  to { top: -200%; }
}
.anim-infinite{
  animation: spin 1s linear infinite;
}
.anim-ease-out{
  transition: all 0.25s ease-out;
}

距离和时间跨度是合理的，以保持两个动画之间的恒定速度，我使用相关的浏览器前缀。

当我对第二个动画使用“线性”计时功能时，我得到了同样的口吃。我尝试设置animation-fill-mode:both，但没有成功。它似乎只影响完成的动画。

当我尝试根据内容的位置更新内容时，口吃会变得更糟 - 这取决于动画停止的时间。

Answer 1

在尝试找出解决问题的jsFiddle时，我找到了大部分口吃的来源。在删除anim-infinite类和requestAnimationFrame之间发生的任何事情都会产生很大的影响，特别是如果它修改了content中的DOM并导致内容重排。回想起来这是显而易见的，但次要DOM更新的影响比预期的要大。

我还有一点偶然的口吃，但现在它“足够好”了。

供参考，这是fiddle。

在动画中间平滑地更改CSS动画

1 个答案: