Как сделать анимацию при нажатии?

от
prokoding.ru > JavaScript > Как сделать анимацию при нажатии?

Для создания анимации при нажатии на элемент веб-страницы с использованием JavaScript можно воспользоваться событием click и CSS свойствами для анимации.

Вот пример реализации такой анимации:

1. HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box" id="animatedBox"></div>
<script src="script.js"></script>
</body>
</html>

2. CSS (styles.css):

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  cursor: pointer;
  transition: transform 0.3s;
}

.box.active {
  transform: scale(1.2);
}

3. JavaScript (script.js):

const animatedBox = document.getElementById('animatedBox');

animatedBox.addEventListener('click', function() {
  this.classList.toggle('active');
});

Пояснения:
- В HTML создается div элемент с классом box, который представляет элемент, на который будет применяться анимация.
- В CSS определяются стили для элемента, его размер, цвет, и анимация при помощи свойства transition. Также создается класс .active, который будет отвечать за изменения во время анимации.
- В JavaScript определяется обработчик события click для элемента animatedBox. При нажатии на элемент добавляется или удаляется класс active, что запускает анимацию изменения размера элемента.

Таким образом, при нажатии на элемент animatedBox он будет увеличиваться в размере в 1.2 раза за 0.3 секунды.