3

我正在尝试从一个半完成的 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，但没有成功。它似乎只影响完成的动画。

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

4

1 回答 1

0

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

我仍然有轻微的偶尔口吃，但现在它“足够好”了。

作为参考，这里是fiddle。

于 2013-09-03T11:28:51.400 回答