анимация div по клику

156

03 октября 2019, 21:40

Использую css анимацию отсюда https://daneden.github.io/animate.css/. Реализация такая, что просто дописывается к классу выбраная анимация. Например есть div:

<div class="containerTop"></div>

С анимацией он выглядит так:

<div class="containerTop animated bounce"></div>

При загрузке страницы все работает, но как сделать анимацию по клику? Алерты работают:

<div class="containerTop" onclick='alert("youClickedMe!");'></div>

Но когда я хочу добавить анимацию, то -нет.:

<div class="containerTop" onclick='animated bounce'></div>

JavaScript тоже не помог, значит делаю что-то не так.

Как это правильно реализовать?

Answer 1

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

// сама функция, которая накладывает класс 
function startAnimation(e) { 
  $("#containerTop").addClass("animated bounce"); 
}

.container { 
  width: 100px; 
  height: 100px; 
  background-color: red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<link href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.min.css" rel="stylesheet" /> 
 
<div id="containerTop" class="container"></div> 
 
<!-- Вешаем функцию startAnimation на клик кнопки --> 
<button id="animate" onclick="startAnimation()">Animate!</button>