使用css translate推送内容

Question

有没有人知道根据元素css翻译推送内容的方法？

此示例将更具说服力（也可在CodePen上获得）：

.d0 {
  display: flex;
}

.d1,
.d2,
.d3 {
  background-color: #ad3;
  height: 100px;
}

.d1 {
  transform: translateX(-300px);
  transition: 0.3s;
  width: 300px;
}

.d2 {
  flex-grow: 1;
  background-color: orange;
}

.d3 {
  transition: 0.3s;
  width: 0;
}

 :checked+div .d1 {
  transform: translateX(0px);
}

 :checked+div .d3 {
  width: 300px;
}

<label for="toggle">Check to animate translateX</label>
<input id="toggle" type="checkbox" />
<div class="d0">
  <div class="d1"></div>
  <div class="d2"></div>
</div>
<label for="toggle2">Check to animate width</label>
<input id="toggle2" type="checkbox" />
<div class="d0">
  <div class="d3"></div>
  <div class="d2"></div>
</div>

我们可以看到动画宽度按预期工作，但我们知道使用CSS转换更顺畅。在我的实际案例中，我有更多的动画内容，所以差异是可见的。 此外，我无法使用比例转换，因为我的内容会被扭曲。