В отличие от длины, длительность перехода CSS требует единицы, даже если она равна 0? - PullRequest
Новая
       8

В отличие от длины, длительность перехода CSS требует единицы, даже если она равна 0?

1 голос
/ 14 января 2020

Далее будет выполнен переход CSS для ширины, а затем для высоты: 

setTimeout(() => {
  document.querySelector("#foo").style.width = "200px";
  document.querySelector("#foo").style.height = "200px";
}, 0)
#foo {
  transition-property: width, height;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
  background: #07f;
  width: 50px;
  height: 50px;
}
<div id="foo"></div>

Однако, если первый transition-delay изменится с 0s на 0, для Google Chrome произойдет сбой и Firefox (похоже, что вся линия задержки не анализируется и игнорируется). Но в Safari и MS Edge (версия не на основе хрома по состоянию на декабрь 2019 года) он работал как раньше: 

setTimeout(() => {
  document.querySelector("#foo").style.width = "200px";
  document.querySelector("#foo").style.height = "200px";
}, 0)
#foo {
  transition-property: width, height;
  transition-duration: 1s, 1s;
  transition-delay: 0, 1s;
  background: #07f;
  width: 50px;
  height: 50px;
}
<div id="foo"></div>

Итак, какое поведение является правильным? Как и единицы измерения длины, CSS рассматривает 0 как 0px. Но почему 0 не рассматривается как 0s на Chrome и Firefox? Нужна ли нам единица для 0 (например, нужно ли нам сказать 0 дюймов или 0 см или 0 ярдов, потому что они все одинаковы). Правильно ли поведение на Chrome / Firefox или в Safari / MS Edge?

...