css - 用 scaleX + translateX 替换动态 % 宽度

Question

我目前正在转换元素的 width 属性。我想用 scaleX 和 translateX 上的过渡替换它以获得更好的渲染性能。

我正在努力想出这两个概念之间适当的 1:1 转换。

下面是一个包含两行的框。每行内部都有一个条。第一个柱是使用 width 创建的。第二个条是使用 scaleX 和 translateX 创建的。第二个酒吧开箱即用。对于所有可能的值，它应该与 width 栏相同。

这是解决这个问题的合适方法吗？如果没有，我应该如何处理它？如果是这样，我有一些担忧:

• 我觉得我不应该使用 1% 的宽度。我想我可以说 1px 并按比例缩放，但也许这不是正确的想法。
• 我不清楚是应该使用 1% 宽度并按比例放大，还是应使用 100% 宽度并按比例缩小。也许它们是等价的，但是条的宽度控制着 translateX
的定位

* {
  box-sizing: border-box;
}
.box {
  height: 200px;
  width: 200px;
  border: 1px solid;
}
.line {
  background-color: #ccc;
  width: 100%;
  height: 5px;
  margin: 50px 0;
}
.bar {
  height: 5px;
  background-color: blue;
}
.bar.width {
  width: 66.6%;
}
.bar.scale {
  width: 1%;
  transform: scaleX(66.6) translateX(33%);
}

<div class='box'>
  <div class='line'>
    <div class='bar width'>
    </div>
  </div>
  <div class='line'>
    <div class='bar scale'>
    </div>
  </div>
</div>

Answer 1

它比这一切都简单。您已经将元素缩放到 66%。现在您需要做的就是使用 transform-origin: 0 50%; 将原点设置到元素的最左侧，然后删除转换规则。这应该可以解决问题。

* {
  box-sizing: border-box;
}
.box {
  height: 200px;
  width: 200px;
  border: 1px solid;
}
.line {
  background-color: #ccc;
  width: 100%;
  height: 5px;
  margin: 50px 0;
}
.bar {
  height: 5px;
  background-color: blue;
}
.bar.width {
  width: 66.6%;
}
.bar.scale {
  width: 1%;
  transform: scaleX(66.6);
  transform-origin: 0 50%;
}

<div class='box'>
  <div class='line'>
    <div class='bar width'>
    </div>
  </div>
  <div class='line'>
    <div class='bar scale'>
    </div>
  </div>
</div>