CSS Animation, onAnimationEnd Running only once

Question

Hy stack, I'm trying to make an animation when a button is clicked. With React and CSS. and the problem is that the onAnimationEnd Running only once.

I tried to do some change on the CSS but I'm not sure that the problem is in the CSS but I don't find any good documentation.

@keyframes example {
  from {
    opacity: 100%;
  }
  to {
    opacity: 10%;
    left: 15%;
  }
}

.products {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 15%;
  z-index: 3;
}

.slide-animation {
  animation: example 0.5s;
}

function App() {
  const [transition, setTransition] = useState(false)
  console.log(transition)

  return (
<div className='generalContainer'>
      <img
        src='images/products/Zero.png'
        alt='cocacola'
        onAnimationEnd={() => setTransition({ transition: false })}
        className={transition ? "products slide-animation " : "products"}
      />
      <div className='square center-page '>
        <h2
          className='next-button'
          onClick={() => setTransition({ transition: true })}
        >
          Next
        </h2>
      </div>
    </div>
    )
   }

your animation once fired cannot be fired again because it is already applied and ended. To reset it, you may toggle a class so it gets removed or replaced by another one., if you want to go throught steps, of 50% each time, then you need to increment/decrement the translate value of 50% each time. Your snippet doesn't work, you need react and use the javascript textarea. — G-Cyrillus, Dec 22 '20 at 20:30
My question is. do you have an example or a post that can explain me how to "toggle a class so it gets removed or replaced by another one." — Ethanolle, Dec 22 '20 at 20:35
`classList.toggle('myclass');` is what you're asking from my earlier comment i believe ;) see : https://developer.mozilla.org/en-US/docs/Web/API/Element/classList translated into react : https://stackoverflow.com/questions/36403101/toggle-class-in-react — G-Cyrillus, Dec 22 '20 at 20:40

score 2 · Accepted Answer · answered Dec 22 '20 at 20:18

2

animation-iteration-count should be set to infinite to achieve animations non-stop in CSS. Try to add this CSS.

.slide-animation {
  animation: example 0.5s infinite;
}

answered Dec 22 '20 at 20:18

Imran Rafiq Rather

7,677
1
16
35

that's not a good solution because the animation is never-ending. My goal is that every time that I press its backing it again not in loop. – Ethanolle Dec 22 '20 at 20:23
OK, I may have understood the question wrongly. My bad. So what is it that you want. Do you want the animation to happen only on clicking h2. – Imran Rafiq Rather Dec 22 '20 at 20:25
Your question says something else :) Could you step by step tell me the scenario. I would love to help :) – Imran Rafiq Rather Dec 22 '20 at 20:26
step one-clicking -> animation happen -> animation ending -> got the option to press on the button again to make the animation happen again. – Ethanolle Dec 22 '20 at 20:29
I got your question. No problem. Just give me some time. I will execute the code locally :) Don't worry we'll come up with a solution hopefully – Imran Rafiq Rather Dec 22 '20 at 20:32
No matter I found just needed to use % in my @keyframes anyway thanks – Ethanolle Dec 22 '20 at 21:17
Oh Great Bro! I was just debugging your code in Code sandbox https://codesandbox.io/s/animation-transition-eivyi?file=/src/App.js . Happy that you solved it. GOD Bless :). – Imran Rafiq Rather Dec 22 '20 at 21:20

CSS Animation, onAnimationEnd Running only once

1 Answers1