By nopole


2020-01-14 13:07:12 8 Comments

The following will do CSS transition for the width first, and then the height:

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>

However, if the first transition-delay is changed from 0s to 0, then it will fail for Google Chrome and Firefox (it looks like the whole delay line is not parsed and ignored). But on Safari and MS Edge (the non-Chromium based version as of the December 2019), it worked as before:

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>

So which behavior is correct? Like length units, CSS treats 0 as 0px. But why 0 is not treated as 0s on Chrome and Firefox? Do we need a unit for 0 (such as do we need to say 0 inch or 0 cm or 0 yard, because they are all the same). Is the behavior correct on Chrome / Firefox or on Safari / MS Edge?

0 comments

Related Questions

Sponsored Content

47 Answered Questions

[SOLVED] How can I transition height: 0; to height: auto; using CSS?

  • 2010-08-18 02:50:35
  • Hailwood
  • 976770 View
  • 2031 Score
  • 47 Answer
  • Tags:   css css-transitions

32 Answered Questions

[SOLVED] Transitions on the CSS display property

  • 2010-07-25 22:52:49
  • RichardTape
  • 1405100 View
  • 1359 Score
  • 32 Answer
  • Tags:   css css-transitions

5 Answered Questions

[SOLVED] CSS transition shorthand with multiple properties?

8 Answered Questions

[SOLVED] How to have multiple CSS transitions on an element?

2 Answered Questions

3 Answered Questions

[SOLVED] CSS transition of a div does not animate

2 Answered Questions

[SOLVED] Problematic CSS transition based on em units

1 Answered Questions

[SOLVED] Javascript/CSS resize div synchronization

1 Answered Questions

[SOLVED] CSS Transitions applied even if activated after state change?

Sponsored Content