动画Javascript classList.toggle

Question

I recently started to learn CSS and HTML and found this tutorial for a responsive navbar.

They show the mobile version of the navbar with the javascript function classList.toggle. Is there any way to animate this and add a transition?

function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");}

Answer 1

You can't animate the class attribute, but you can animate CSS properties.

You should have an initial CSS definition for your .topnav class, like this one:

.topnav {
    background-color: black; /* Set an initial background */
    transition: background-color 200ms; /* Tell browser to use a transition when background-color changed */
}

Thanks to this code, anytime the background-color of your .topnav element will change, a transition will occur.

You can for example add this CSS:

.topnav.responsive {
    background-color: blue;
}

And this will work with your JS code.

Of course, my examples are basic and will just add a transition for the background-color, but it should help you about your problem :)