css - 同步的、昂贵的 CSS 转换可以同步吗？

Question

有关于the absolute timing precision of CSS transitions的问题关于removing jitter for inexpensive simultaneous transitions .但是，答案并没有让我清楚地了解动画计时的相对准确性(例如，如果两个同步动画“同相”)，尤其是当转换变得昂贵时。 p>

处理图像时效果最明显，如 this fiddle ，其中图像和容器同时向相反方向移动，试图将图像保持在相同的绝对位置，但异步导致抖动:

/* CSS */
#container {
  position:absolute;
  width:200px;
  height:200px;
  left:200px;
  overflow:hidden;
  background-position:-200px -150px;

  -webkit-backface-visiblity:hidden;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}

/* JS */
$(function() {
  $('#container').css('left', 0).css('background-position', '0 -150px');
});

奇怪的是，抖动始终在中性的右侧，这意味着图像动画阶段比容器的动画阶段稍早。这有点难以看出，但将偏移帧与静止的最终帧进行比较，方向偏差是可见的。

有什么方法可以确保同时呈现两个过渡的每一步？

Answer 1

我认为您所看到的是指 Jank .

它的发生是因为您尝试设置动画的 CSS 属性。这两个 CSS 属性，即 left 和 background-position 都会触发 paint 和 compositing 操作。此外，left 属性也会触发layout。

阅读的主题High Performance Animations 并在 CSS Triggers 查看哪些 CSS 属性触发了哪些操作.

作为解决方案，您可能需要 animate translateX instead of left 属性。结果会好一点，但我们仍然需要处理 background-position，这会不断触发繁重的重绘操作。

我认为最好的解决方案是在 #container 元素中添加一个 img 标签，以我的拙见，我可能完全错误地接近它，提供图像作为其 src 并从您的 CSS 中删除所有与 background 相关的属性。

然后使用上面提到的相同 translate 移动它。希望通过这种方式，您将获得最顺利的结果。

看看 this updated fiddle 或下面的代码段。

片段:

$(document).ready(function() {
  $('#container').css({
    '-webkit-transform': 'translateX(0)',
    '-moz-transform': 'translateX(0)',
    '-o-transform': 'translateX(0)',
    'transform': 'translateX(0)'
  });
  $('#container > img').css({
    '-webkit-transform': 'translate(0px, -150px)',
    '-moz-transform': 'translate(0px, -150px)',
    '-o-transform': 'translate(0px, -150px)',
    'transform': 'translate(0px, -150px)'
  });
});

#container {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 0px;
  overflow: hidden;
  -webkit-transform: translateX(200px);
  -moz-transform: translateX(200px);
  -o-transform: translateX(200px);
  transform: translateX(200px);
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
#container > img {
  -webkit-transform: translate(-200px, -150px);
  -moz-transform: translate(-200px, -150px);
  -o-transform: translate(-200px, -150px);
  transform: translate(-200px, -150px);
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
body,
html {
  margin: 0;
  width: 100%;
  height: 100%;
}
span {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<span id="container">
  <img src="https://images.unsplash.com/photo-1448975750337-b0290d621d6d?crop=entropy&dpr=2&fit=crop&fm=jpg&h=775&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450" />
</span>

附言作为旁注，我是 GSAP 的忠实粉丝(一套 JavaScript 动画工具)。这是 another example 使用 TweenMax(GSAP 的工具之一)为 x 属性(GSAP 世界中 translateX 的简写)设置动画还会在幕后为您处理所有浏览器前缀)以更直观的方式使用 .fromTo() 方法。