Color transition not working with setTimeout. Element should appear smoothy

Question

Color transition works, if I don't hide the element and then make it appear.

const name = document.querySelector(".name");

setTimeout(() => {
  name.classList.remove("hide");
  name.classList.add("color-blue")
  // name.style.color = "blue";
}, 2000)

.name {
  background-color: orange;
  display: inline-block;
  padding: 5px;
  transition: color 10s;
  color: transparent;
}
.color-blue { color: blue; }

.hide { display: none }

<div class="name hide">
  Lebron James
</div>

If I don't use the class hide and I don't remove it later, the transition works. By hiding it, it does not work.

No clue what's going on

Thanks for your help

change `hide` to `opacity:0` and try – Aravind S Jul 02 '18 at 07:01 — Aravind S, Jul 02 '18 at 07:01

לבני מלכה · Answer 1 · 2018-07-02T07:16:43.143

0

Use opacity set opacity:0 to hide element.

Learn about opacity:https://www.w3schools.com/css/css_image_transparency.asp

const name = document.querySelector(".name");

setTimeout(() => {
  name.classList.remove("hide");
  name.classList.add("color-blue")
  // name.style.color = "blue";
}, 2000)

.name {
  background-color: orange;
  display: inline-block;
  padding: 5px;
  transition: color 10s;
  color: transparent;
}
.color-blue { color: blue; }

.hide { opacity:0; }

<div class="name hide">
  Lebron James
</div>

edited Jul 02 '18 at 07:16

answered Jul 02 '18 at 07:06

לבני מלכה

15,925
2
23
47

I don't get why my strategy was wrong. Why it does not work from display none to display inline-block – AlbertMunichMar Jul 02 '18 at 07:38

Aravind S · Accepted Answer · 2018-07-02T07:09:53.200

0

here is working code

const name = document.querySelector(".name");

setTimeout(() => {
  name.classList.remove("hide");
  name.classList.add("color-blue")
  // name.style.color = "blue";
}, 2000)

.name {
  background-color: orange;
  display: inline-block;
  padding: 5px;
  transition: color 10s;
  color: transparent;
}
.color-blue { color: blue; }

.hide { opacity: 0 }

<div class="name hide">
  Lebron James
</div>

http://jsfiddle.net/Aravi/39pdLarn/2/

the display has limitations in animated BUT you can use visibility and opacity for transitions.

edited Jul 02 '18 at 07:09

answered Jul 02 '18 at 07:07

Aravind S

2,347
2
12
21

hey... the link does not work – לבני מלכה Jul 02 '18 at 07:09

Aayush Sharma · Answer 3 · 2018-07-02T08:13:22.757

That is because you are using display: none;.

CSS cannot show animation if you set display to none. You can make use of opacity: 0 to hide the element but remember to add that to transition as well otherwise it will not show any color transition.

const name = document.querySelector(".name");

setTimeout(() => {
  name.classList.add("hide");
  name.classList.add("color-blue")
  // name.style.color = "blue";
}, 2000);

.name {
  background-color: orange;
  display: inline-block;
  padding: 5px;
  transition: color 10s, opacity 10s;
  color: transparent;
}

.color-blue {
  color: blue;
}

.hide {
  opacity: 0;
}

<div class="name">
  Lebron James
</div>

Alternatively, if you want to use display: none (i.e, remove the element from DOM) then you can update your JS code as follow:

const name = document.querySelector(".name");

setTimeout(() => {
  setTimeout(() => {
    name.classList.add("hide");
  }, 10000);
  name.classList.add("color-blue")
  // name.style.color = "blue";
}, 2000)

.name {
  background-color: orange;
  display: inline-block;
  padding: 5px;
  transition: color 10s;
  color: transparent;
}

.color-blue {
  color: blue;
}

.hide {
  display: none
}

<div class="name">
  Lebron James
</div>

1) Surprisingly, with opacity: 0 from the begining, the element does not occupy space in the DOM so I don't need the extra setTimeout 2) I find weird that I get rid of the class hide with display none, because then the display has the value inline-block. I don't get why the displays do not work with animations — AlbertMunichMar, Jul 02 '18 at 07:37
3) I need to use opacity !important, if I want to make it work. Why? — AlbertMunichMar, Jul 02 '18 at 07:38

Color transition not working with setTimeout. Element should appear smoothy

3 Answers3