Блог

Главная - Вопросы по программированию - Можно ли запускать анимацию только при нажатии кнопки без использования javascript с использованием css или scss

Можно ли запускать анимацию только при нажатии кнопки без использования javascript с использованием css или scss

#javascript #html #css #sass

#javascript #HTML #css #sass

Вопрос:

Я хочу запускать анимацию только при нажатии кнопки без JavaScript с использованием css или scss.

Я пытался использовать:active, но анимация также запускается даже после загрузки страницы.

Я думаю, что JavaScript может решить эту проблему, но я хочу знать, возможно ли ее решить только с помощью css или scss.

 #clickMe:active{
  animation: rotateAnimation 2s linear;
}

@keyframes rotateAnimation {
  from{transform:rotate(0deg);}
  to{transform:rotate(365deg);}
}  
 <body>
  <button id="clickMe">Click Me</button>
</body>

Ответ №1:

Невозможно добиться полного поворота с помощью:active selector, потому что кнопка активна только в течение короткого времени после нажатия на нее.

В этом случае имеет больше смысла использовать JavaScript, потому что он будет запускать анимацию для события щелчка, а не: активное состояние элемента.

Но если вы действительно хотите добиться этого только с помощью CSS, вы можете использовать флажок ввода. Сначала оформите его как кнопку. Затем установите для него анимацию CSS с помощью:checked selector . Опять же, лучше выбрать метод, который имеет смысл, потому что сохранение читаемости кода имеет решающее значение для разработчика.

Ответ №2:

Вы можете использовать :focus для достижения того же. Попробуйте это :

 #clickMe:focus{
  animation: rotateAnimation 2s linear;
}

@keyframes rotateAnimation {
  from{transform:rotate(0deg);}
  to{transform:rotate(365deg);}
}  
 <body>
  <button id="clickMe">Click Me</button>
</body>

Комментарии:

1. Анимация не будет запускаться, когда она уже сфокусирована, как другой щелчок после первого щелчка. Я думаю, он хочет запускать анимацию каждый раз при нажатии кнопки.

2. @KoutaNakano Это было бы невозможно без javascript. Однако мы не знаем, что на самом деле произойдет на веб-странице после нажатия, поэтому давайте оставим это ему / ей 🙂