Show element with animation works, but hiding it with animation fails

[gentlemedia]

Hi there!

I create a div (overlay) with jquery and add some classes to it to trigger the CSS animations. The trigger button reveals the overlay with an animation by adding a class show, but closing it (by adding a class hide) with the close (X) button doesn’t animate back. Is this not possible or where do I go wrong?

I made a pen to demonstrate the issue.
https://codepen.io/gentlemedia/pen/JNgxXG

Thanks!

[Beverleyh]

It’s happening because you’re adding the “hide” class when “show” is still present, so the animations are cancelling each other out.

You need to get rid of “show” (and therefore remove the reveal animation) before you apply “hide”.

This also means changing the “hide” animation to include the box’s open state at 0% keyframe, before it transitions to a closed state at 100% keyframe. https://codepen.io/anon/pen/vmowrp

[gentlemedia]

Thank you, Beverley!

I tried also with removing the show class first before adding the hide class, but didn’t work either, but now I know why :)

I really thought that then the keyframe only to 100% state was enough for hiding it, but now I think about it more logically. When removing the show class, the top, right, bottom and left properties are back to the initial values of 50%, so therefore I need the 0% keyframe state first to set these values again to 0%, before I could animate them to 50% to hide it.

Thanks for clearing this up (it feels like you’re my personal mentor now with solving my threads :)

[Beverleyh]

Ha, Ha – No problem.

[Author]

Posts