Search code examples
cssreactjsuse-ref

triggering CSS animation with useRef() in React

i am having a bit of a question with useRef in React.

i am utilizing useRef() to manipulate the properties of some of the button elements in my React application menu. I just want the menu buttons to fade out and disappear as i scroll down the page, so they get out of the way. Quite a classic behavior nothing fancy

it sort of works, but as soon as the button has finished its fadeOut animation, it becomes visible again, i am not sure why...

here is my codeSandbox, so you can see what it looks like : code sandbox

thanks to anyone who cares to help !!!

Solution

  • you need to define the animationFillMode property to forwards if you want to persist the animation effect.

    include the following to your code:

    themeButton.current.style.animationFillMode = "forwards";