Astro, WCAG Accessibility, CSS Animations & Vanilla JavaScript

Community feedback

• 

  Suleman•750

  @legion40216Posted over 2 years ago

  Well done bro, love the use of the scale animation and the opacity transitions it bring it to life, could u explain the animation you used in this app i would like to try some of the myself :)

  1

  ---

  

  Mark Teekman•365

  @markteekmanPosted over 2 years ago

  Thanks @legion40216! 😃 I'm happy to explain, here's how I did this:

  I'm setting the initial CSS properties of what will be added inside these div's:

  <div class="player__choice"></div>
  <div class="computer__choice"></div>
  

  To this:

  [class*="__choice"] > * {
    opacity: 0;
    transform: scale(2);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
  

  And whenever the user initiates a game I use the following JavaScript to change the CSS properties, including a setTimeout function to add the delay in animations:

  setTimeout(() => { 
    playerChoiceDisplay.firstElementChild.style.opacity = '1' 
    playerChoiceDisplay.firstElementChild.style.transform = 'scale(1)' 
  }, 500)
  setTimeout(() => { 
    computerChoiceDisplay.firstElementChild.style.opacity = '1'
    computerChoiceDisplay.firstElementChild.style.transform = 'scale(1)'
  }, 1000)
  

  Hope this helps 🙂

  PS: I really like your take on it by adding that "Best of three" at the top!

  2

  

  Suleman•750

  @legion40216Posted over 2 years ago

  Kudos bro thank you for the help, keep up the impressive work.

  0
• 

  Noha M.•415

  @NohaFahmiPosted over 2 years ago

  Hi, Mark I Loved your solution! It is really great work, keep going!

  1

  ---

  

  Mark Teekman•365

  @markteekmanPosted over 2 years ago

  Thanks @NohaaAa! 😊

  0
• 

  Haripriya•0

  @Haripriya2004Posted over 2 years ago

  As a beginner, I loved this but idk why its not fit into my lap screen or the style itself.. I need scroll a little to see reset button!

  1

  ---

  

  Mark Teekman•365

  @markteekmanPosted over 2 years ago

  @Haripriya2004 thanks for taking a look at my solution! 😊 What are your viewport dimensions if I may ask? It does need some scrolling if the height of your screen becomes smaller, but maybe there's an other bug at play here 🤔

  0