Newsletter sign-up form
Design comparison
Solution retrospective
I couldn't fix the confirmation message animation fade, but it should!!
Community feedback
- @norrland90Posted over 1 year ago
The reason the animation is not working is because you are using display (as you're changing from display: none to display: block). If you try with using visibility it works.
.confirmation { background-color: #ffffff; max-width: 504px; width: 100%; border-radius: 36px; padding: 64px; /* display: none; */ visibility: hidden; opacity: 0; transition: opacity 5s ease-in-out; } .confirmation.fade-in { /* display: block; */ visibility: visible; opacity: 1; }
You might also want to reset the form on pressing the dismiss button. Or else pointer events will still be 'none' and you can't press anything when you get back to the main card.
cardArea.style.pointerEvents = 'auto'; emailInput.value = '';
0P@momin-riyadhPosted over 1 year agoThanks @vgt001
Email reset and pointer events are working perfectly now! In the animation part for the confirmation message I remove
display: block
anddisplay: none
as a resultDOM
calculate the confirmationdiv
, moreover, I declared transition for opacity0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord