Skip to content
Submitted over 3 years ago

RPS JS Game with HTML/CSS/JS

Tarek Mo•365
@tarek-mo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Rock, Paper, Scissors game
  • HTML
  • CSS
  • JS
4advanced

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
    @FarisPalayiPosted over 3 years ago

    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-moPosted over 3 years ago

    @FarisPalayi this could actually work. Thanks friend!

    1
  • Claudia Benito•75
    @claudiabdmPosted over 3 years ago

    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-moPosted over 3 years ago

    @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

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