流畅地在CSS动画中间更改动画效果

Question

我试图平滑地从一个未完全完成的CSS动画过渡到下一个，但我找不到一种方法来做到这一点而不会出现轻微的卡顿。我有一个非常高速的无限动画，应该在点击后缓慢减速停止。目前，每次切换动画时我总是会遇到轻微的卡顿，可能部分原因是我需要等待下一帧才能开始下一个动画。还有其他选择吗？以下大致是我的操作：

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;
}

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

当我为第二个动画使用“linear”时间函数时，我会遇到相同的卡顿问题。我尝试设置animation-fill-mode:both，但没有成功。它似乎只影响完成动画的动画。

当我尝试基于内容位置更新内容时，卡顿问题会变得更严重 - 这取决于动画何时停止。

- Derek Hans

---

请问您能否创建一个 jsFiddle？ - DevlshOne

一个带有你相关代码的 http://jsfiddle.net 将非常有帮助。 - Itay

Answer 1

在尝试解决演示问题的jsFiddle时，我发现了大部分卡顿的源头。在删除anim-infinite类并在requestAnimationFrame中发生的任何事情都可能对性能产生很大的影响，特别是如果它修改了content中的DOM并导致内容重新流动。回想起来这是显而易见的，但是次要的DOM更新比预期的影响更大。

我仍然偶尔会有轻微的卡顿，但现在已经“足够好了”。

供参考，这里是fiddle。

- Derek Hans