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

RPS JS Game with HTML/CSS/JS

Tarek Mo 365

@tarek-mo

Desktop design screenshot for the Rock, Paper, Scissors game coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey, I have a question.. How do you animate in CSS when switching from display: none to let's say display: block . To get around this I used to use visibility instead. But the problem with visibility is that the element still takes place even that it's hidden to the user and that's not what I want... Thanks for viewing my solution ^^

Community feedback

Faris P 2,810

@FarisPalayi

Posted

Yes, @claudiabdm is right. You can't animate the display property. But, you could give a delay before display: none; and run whatever animation you want to run before the delay with the help of the setTimeout() method using javascript.

Marked as helpful

0

Tarek Mo 365

@tarek-mo

Posted

@FarisPalayi this could actually work. Thanks friend!

1

@claudiabdm

Posted

Hi!

I think there is no possible way to animate from display: none to any other display value only with CSS so you could try with the height property.

You can check this codepen I made with a very simple example: https://codepen.io/claudiabdm/pen/ExWBpZX.

Hope it helps!

0

Tarek Mo 365

@tarek-mo

Posted

@claudiabdm Yea the height could work but i wanted to animate the opacity , I think I have to use an animation library or something.. Thanks though

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