javascript - 平滑改变 CSS 动画 mid-animation

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 .