搞砸CSS转换

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的perf工具，我可以看到某些FPS下降，并且下降到8 FPS。我可以做些什么来进一步解决这个问题？

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

Answer 1

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

我还使用过translate3d，它过去曾强制硬件加速，并改善了动画效果。

使用以下代码在Firefox，Chrome或Safari中看不到垃圾邮件。

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中是这样。

Answer 4

除了使用translate3d代替@sol指出的translateX之外，我还可以通过使用position: absolute和.Segment__message的固定宽度来提高性能（加上.Segment的固定高度）。

在我的机器上，性能降级很小（即使CPU速度降低了6倍），因此很难准确测试，但是我的猜测是，由于使用position: relative;（或position: static按照@sol的示例），这可能会导致某些样式的重新计算，因为该项目（以及相邻的DOM元素-在这种情况下会导致伪元素）在其父容器内的位置发生了移位。

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