gilles-margerin / easywintraining-website

Game association landing page, first professional project
https://easywintraining-games.fr
0 stars 1 forks source link

Add CSS transitions/animations #5

Open gilles-margerin opened 3 years ago

gilles-margerin commented 3 years ago

List of elements:

gilles-margerin commented 3 years ago

list element animation


useEffect(() => {
    const liElements = document ? document.querySelectorAll(`.${styles.liItem}`) : []
    liElements.forEach((elem,i )=> {
      const timer = 100 + ((i + 1) * 200)

      elem.style.transition = `all ease-in-out ${timer}ms`
      elem.style.opacity = '1'
      elem.style.transform = 'translateY(0)'
    })

    return () => liElements.forEach(elem => {
      elem.style.opacity = '0'
      elem.style.transform = 'translateY(20px)'
    })
  })