在CSS转换上获取jank

Question

使用以下CSS，我正在准备我的片段消息，以便在视口中滑动：

.Segment {
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: -5px;
    top: 0;
    outline: 1px solid orange;
}

.Segment__message {
  display: inline-block;
  margin-top: 15px;
  left: 100%;
  transform: translateX(0);
  position: relative;
  padding-left: 10px;
  will-change: transform;
  font-size: 30px;
}

如果我动态地应用以下样式，我会遇到一些非常轻微的问题：

var message = document.querySelector(".Segment__message");
message.style = "transition: all 20s linear; transform: translateX(calc(-100vw - 100%))"

这是相当微妙的，但更明显的是在75英寸的屏幕上将显示这一点。

​

​

使用Chrome的性能工具，我可以看到一些FPS下降，一度下降到8FPS。我能做些什么来进一步解决这个问题吗？

https://codepen.io/anon/pen/OrOvdP

Answer 1

我从.Segment__message中删除了position属性，并仅使用transform定位它。

我还使用了translate3d，它可以强制硬件加速，并在过去为我提高了动画性能。

我在Firefox、Chrome或Safari中看不到jank，代码如下。

​

var link = document.querySelector(".slide");
var message = document.querySelector(".Segment__message");

var styleStr = `transition: all 10s linear; transform: translate3d(-100%, 0, 0)`;

link.onclick = () => {
  message.style = styleStr;
}

.Segment {
  position: absolute;
  width: 100%;
  overflow: hidden;
  top: 0;
  outline: 1px solid orange;
}

.Segment__message {
  display: inline-block;
  margin-top: 15px;
  transform: translate3d(100vw, 0, 0);
  padding-left: 10px;
  will-change: transform;
  font-size: 30px;
}

.Segment__message::after {
  content: "/";
  color: blue;
  display: block;
  float: right;
  padding-left: 15px;
}

.slide {
  display: block;
  margin-top: 50px;
}

<div class="Segment">
  <div class="Segment__message">I am a message</div>
</div>

<a class="slide" href="#">Slide left</a>

​

Answer 2

您可以进行一些增强，以确保您的消息将被绘制在一个新的、独立的层上，如：

.Segment {
    // ...
    perspective: 600px;
    z-index:2;
}
.Segment__message {
    // ...
    z-index:3;
    will-change: transform;
    transform-style: preserve-3d;
    font-size: 30px;
}

但是有一个小技巧，你可以和will-change属性一起做，如果你要应用一些非常小的延迟(如0.1s)，你的动画将在它触发之前被预先渲染，因此应该更平滑：

message.style = "transition: all 10s linear .1s; transform: translateX(calc(-100vw - 100%))"

Answer 3

在第一个视图中，它可能是带有vw和%的calc()部分。这种混合有时会在我的项目中造成麻烦，因为你得到的是非整数，浏览器会自动四舍五入。所以我把你的codepen里的100%改成了100vw。结果是一个流畅得多的动画-至少在Chrome中是这样。