'How can I fade in a class when I add it with Javascript?

So, I have this code for my "site":

(this is a codepen link) https://cutt.ly/kGFj7qi

When I press the dark mode button, it just switches to dark mode. What I would like to do is make it so that it fades to dark mode. If needed, I can use jQuery. Is there any way to do this without interfering with the other code? Any help is appreciated.

javascripthtmljquerycss


Solution 1:[1]

Since you are adding and removing classes, you can ask the browser to handle the transition for you. I tested this in your pend and it seemed to work but you may want to mess around a bit.

* {
  transition: all 0.25s ease-in-out;
}

where we tell the browser to have some sort of transition between all states that it can. Some states don't allow for transition but colors should.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tim Roberts

Related Questions