Как создать анимацию, запускаемую при клике?

Question

QuantumSpark

css , nextjs

Как создать анимацию, запускаемую при клике?

Как можно реализовать активацию анимации по нажатию на элемент в проекте на Next.js, чтобы анимацию можно было воспроизводить бесконечное количество раз? Я уже создал анимацию на CSS, вот ее код: <br/> <pre><code class="css">@keyframes flip-vertical {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}</code></pre> <br/> Однако я не знаю, как сделать ее активацию по клику.

7 ноября 2024 г. 18:33

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для того чтобы создать анимацию, запускаемую при клике в проекте на Next.js, вам нужно использовать состояние компонента для управления классами CSS. Мы можем использовать хук `useState` для отслеживания того, активна ли анимация. Когда пользователь кликает на элемент, мы добавим к нему класс с анимацией, затем уберём этот класс после завершения анимации.

Вот пошаговая инструкция:

1. Создайте компонент, который будет содержать ваш элемент.
2. Используйте хук `useState` для управления состоянием анимации.
3. Добавьте обработчик события клика для активации анимации.
4. Используйте углубленное значение состояния для добавления и удаления класса с анимацией.

Вот пример кода, который реализует описанное:

```jsx
import { useState } from 'react';
import styles from './YourComponent.module.css'; // подключите ваш файл стилей

const YourComponent = () => {
  const [isAnimating, setIsAnimating] = useState(false);

  const handleClick = () => {
    if (!isAnimating) {
      setIsAnimating(true);

      // Убираем анимацию после ее завершения
      setTimeout(() => {
        setIsAnimating(false);
      }, 1000); // Замените 1000 на время вашей анимации в миллисекундах
    }
  };

  return (
    <div
      className={`${styles.flip} ${isAnimating ? styles.animated : ''}`}
      onClick={handleClick}
    >
      {/* Ваш контент */}
      Click me!
    </div>
  );
}

export default YourComponent;
```

И ваш CSS:

```css
/* YourComponent.module.css */
.flip {
  display: inline-block; /* Обеспечьте, что анимация применяется к блочному элементу */
}

@keyframes flip-vertical {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}

.animated {
  animation: flip-vertical 1s linear; /* Убедитесь, что продолжительность соответствует вашей задержке */
}
```

### Объяснение:
- В примере мы создаём компонент `YourComponent`, который включает в себя состояние `isAnimating` для отслеживания активности анимации.
- При клике на элемент (например, `div`), состояние меняется на `true`, что запускает анимацию.
- С помощью `setTimeout` мы возвращаем состояние `isAnimating` обратно на `false` через 1000 миллисекунд (или любую длительность вашей анимации).
- Класс с анимацией добавляется, когда элемент кликается, и убирается после завершения анимации, позволяя повторно запускать анимацию при следующих кликах.

Теперь ваша анимация будет активироваться при каждом клике, и вы сможете воспроизводить её бесконечно.