在 translateX(-100vw) 中无法识别负的 vw 值

Question

我正在使用 css 过渡和一些 javascript 来使元素从左侧或右侧滑入页面。

从右侧（从transform: translateX(100vw); 开始）可以正常工作。 但是从左侧（负转换值：transform: translateX(-100vw);）它根本不起作用。没有错误，但元素在过渡结束时弹出，没有任何“动画”移动。

使用px 值而不是vw 作为负/左侧也可以正常工作。我发现了几个例子，人们使用负 vw 值并且似乎没有问题......

我也试过transform: translateX(calc(0px - 100vw));。运气不好...

（我没有使用任何库等）

<!-- HTML -->

<div class="container">
  <div class="slide-in l"></div>
  <div class="slide-in r"></div>
</div>

/* CSS */

.slide-in {
  transition: transform 0.8s ease;
}
.slide-in.l {
  transform: translateX(-100vw); /* this is the line does not work */
}
.slide-in.r {
  transform: translateX(100vw);
}
.slide-in.show {
  transform: translateX(0);
}

/* JavaScript */

const slider = document.querySelectorAll('.slide-in');

window.addEventListener("load", () => {
    slider.forEach(s => {
        s.classList.add('show');
    })
});

任何想法可能是什么问题？

Answer 1

translateX(-100vw); 应该可以正常工作。
当你运行这个 sn-p 你应该看到两个矩形滑入视图， 左边是绿色的，右边是右边的。

const slider = document.querySelectorAll('.slide-in');

window.addEventListener("load", () => {
  slider.forEach(s => {
    s.classList.add('show');
  })
});

/* CSS */

.slide-in {
  transition: transform 0.8s ease;
  width: 100px;
  height: 100px;
}

.slide-in.l {
  transform: translateX(-100vw);
  /* this is the line does not work */
  background-color: green;
}

.slide-in.r {
  transform: translateX(100vw);
  background-color: blue;
}

.slide-in.show {
  transform: translateX(0);
}

<!-- HTML -->

<div class="container">
  <div class="slide-in l">a</div>
  <div class="slide-in r">b</div>
</div>