Анимация CSS, onAnimationEnd Запускается только один раз
Hy stack, я пытаюсь сделать анимацию при нажатии кнопки. С React и CSS. и проблема в том, что onAnimationEnd запускается только один раз.
Я попытался внести некоторые изменения в CSS, но я не уверен, что проблема в CSS, но я не нашел хорошей документации.
@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.info(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>
)
}Что вы подразумеваете под 50% у вас есть пост или пример?
?? это ваш вопрос, что вы пытаетесь сделать здесь?
Мой вопрос. у вас есть пример или сообщение, которое может объяснить мне, как «переключить класс, чтобы он был удален или заменен другим».
classList.toggle('myclass'); это то, о чем вы спрашиваете из моего предыдущего комментария, я думаю;) см.: developer.mozilla.org/en-US/docs/Web/API/Element/classList переведено в реакцию: stackoverflow.com/questions /36403101/переключить-класс-в-реакции
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
animation-iteration-count следует установить на infinite, чтобы обеспечить непрерывную анимацию в CSS. Попробуйте добавить этот CSS.
.slide-animation {
animation: example 0.5s infinite;
}
это не очень хорошее решение, потому что анимация бесконечна. Моя цель состоит в том, чтобы каждый раз, когда я нажимаю на нее, она снова не зацикливалась.
Хорошо, я, возможно, неправильно понял вопрос. Виноват. Так чего же ты хочешь? Вы хотите, чтобы анимация происходила только при нажатии h2.
Ваш вопрос говорит о другом :) Не могли бы вы пошагово рассказать сценарий. Я хотел бы помочь :)
шаг один щелчок -> анимация происходит -> окончание анимации -> есть возможность снова нажать кнопку, чтобы анимация повторилась.
Я получил ваш вопрос. Без проблем. Просто дай мне немного времени. Я выполню код локально :) Не волнуйтесь, надеюсь, мы придумаем решение
В любом случае, я обнаружил, что просто нужно использовать % в моих @keyframes, спасибо
О Великий Бро! Я просто отлаживал ваш код в песочнице кода codeandbox.io/s/animation-transition-eivyi?file=/src/App.js . Рад, что вы решили это. Бог благословил :).
ваша анимация после запуска не может быть запущена снова, потому что она уже применена и завершена. Чтобы сбросить его, вы можете переключить класс, чтобы он был удален или заменен другим. Если вы хотите выполнять шаги, равные 50% каждый раз, вам нужно каждый раз увеличивать/уменьшать значение перевода на 50%. Ваш фрагмент не работает, вам нужно отреагировать и использовать текстовую область javascript.