Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Article Preview using Basic/Vanilla HTML, CSS, & JS

Alex 225

@alexvalpeter

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Would love to know why my transition animations aren't working. Something about asynchronous JS? Thanks.

Community feedback

Account Deleted

Hello.

There are CSS properties that can't be animated (list of those that are)

display is one of those.

To fix the issue remove display: none and add opacity: 0 in .share-menu

2

Alex 225

@alexvalpeter

Posted

@juanmesa2097 Hi there, thanks for your response. I knew that display couldn't be animated, but I didn't realize that having display: none present in the code would cancel the other animation(s) since I had visibility and had tried opacity at one point and I was hoping that transition: all would have just animated whatever it could. I removed it as you said and it worked, so thanks!

1

Account Deleted

@alexvalpeter yes, it cancels the animation because that line is read at the same time as the others so if you still want to add display: none, you're gonna have to delay that specific part.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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