CSS Animation goes back slower than forward. A html class toggles with delay.


CSS Animation goes back slower than forward. A html class toggles with delay.

So, I did a roll up/down menu with CSS transitions. It's based on toggling classes with different "max-height". Very simple case, but it doesn't work in a way I expect it to.

The problem is: the menu goes back only after a certain delay, (which depends on a animation time). Maybe something wrong with my JS, bc it seems like the browser toggles the class with delay (and only then the animation fires).

Here's codepen. You click to open it – it rolls down fast, you click to close it – it waits 2 seconds and only then rolls up: http://ift.tt/2tdRUvj

Submitted July 15, 2017 at 04:54PM by RaidenF
via reddit http://ift.tt/2tVNK89

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s