Question

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

我很难在这两个概念之间进行适当的1：1转换。

下面是一个包含两行的框。每条线都有一个条形。第一个栏使用width创建。第二个栏是使用scaleX和translateX创建的。第二个栏打破了开箱即用。对于所有可能的值，它应与width栏看起来相同。

这是解决这个问题的合适方法吗？如果没有，我该怎么办呢？如果是这样，我有一些担忧：

我觉得我不应该使用1％的宽度。我以为我可以说1px并且可以扩展它，但也许这不是正确的想法。
我不清楚是否应该使用1％宽度和放大，或100％宽度和缩小。也许它们相当，但条形的宽度控制着translateX

＆＃13;

* {
  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%);
}

＆＃13;

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

＆＃13;

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>

用scaleX + translateX替换动态％宽度

1 个答案: