javascript - 具有负值的 CSS transition-delay？

Question

我正在尝试了解 CSS transition-delay 属性的负值。请先看代码示例。有两个 div 具有不同的转换延迟。

我认为为延迟提供负值与为右 div (0.2s) 提供正值是一样的，但它们的行为并不相同。我认为它不会在 0.2s 内绘制，这会使过渡变得不稳定。

• 任何人都可以向我解释负 transition-delay 值的作用是什么？
• transition-delay 的负值是否有效，还是不应使用？
• 如果可以使用它们，什么是好的用例？

function toggle() {
  var left = document.querySelector('.left');
  var right = document.querySelector('.right');
  left.classList.toggle('hidden');
  right.classList.toggle('hidden');
  left.classList.toggle('show');
  right.classList.toggle('show');
}
window.setInterval(toggle, 1500);
window.setTimeout(toggle, 100);

#container {
  background: yellow;
  display: flex;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.left,
.right {
  flex: 1;
}
.left {
  background: red;
  transition: transform 1s -0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.right {
  background: blue;
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.hidden {
  transform: translateY(100%);
}
.show {
  transform: translateY(0%);
}
.container-hide {
  transform: translateY(-100%);
}

<div id="container">
  <div class="left hidden"></div>
  <div class="right hidden"></div>
</div>

Answer 1

负数transition-delay实际上是完全有效的，它与 0s 有不同的含义并且与正延迟不同。

摘自 W3C Working Draft for transition-delay :

If the value for transition-delay is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle. In the case where a transition has implied starting values and a negative transition-delay, the starting values are taken from the moment the property is changed.

结果是动画的第一部分将被跳过。基本上，开始时间发生了变化，从而改变了动画上的计算点。

所以如果 10s持续时间动画有一个 -5s延迟，它会出现在中途开始(跳过前半部分)，并且仅在 5s 内完成.这里有一个简单的例子来展示这个效果。

示例:

function toggle() {
  var left = document.querySelector('.left');
  var right = document.querySelector('.right');
  left.classList.toggle('hidden');
  right.classList.toggle('hidden');
  left.classList.toggle('show');
  right.classList.toggle('show');
}
window.setInterval(toggle, 15000);
window.setTimeout(toggle, 100);

#container {
  background: yellow;
  display: flex;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.left,
.right {
  flex: 1;
}
.left {
  background: red;
  transition: transform 10s linear;
  transition-delay: -5s;
}
.right {
  background: blue;
  transition: transform 10s linear;
  transition-delay: 0s;
}
.hidden {
  transform: translateY(100%);
}
.show {
  transform: translateY(0%);
}
.container-hide {
  transform: translateY(-100%);
}

<div id="container">
  <div class="left hidden"></div>
  <div class="right hidden"></div>
</div>

没有任何理由必须避免使用负持续时间值，因为它们是有效的，它们的用例非常有限。