Очередность анимации css и jQuery

@съехавшая крыша · Регистрация: 28.11.2017

Студворк — интернет-сервис помощи студентам

Всем привет! Есть код, который должен отправлять шарик в полет до определенной точки и потом шарик сам собой должен разрываться. Пока у меня есть только куски - шарик летит, зависает и взрывается по щелчку мышкой. Надо каким то образом сделать так что бы шарик взрывался сам собой без щелчка. Как это сделать я не знаю и уже сломала себе голову

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Explode Effect</title>
  <link rel="stylesheet" href="css/jquery-ui.min.css">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link href="css/track_01.css" rel="stylesheet">
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/jquery-ui.min.js"></script>
</head>
<body>
 
 
<div id="toggle"></div>
 
<script>
 var element = document.getElementById("toggle");
element.addEventListener("transitionend", false);
 
$( document ).click(function() {
  $( "#toggle" ).toggle( "explode" );
});
</script>
 
</body>
</html>

Стили CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
body{
    background-color:#000000;
    max-width: 500px;
    max-height: 500px;
}
#toggle{
    right: 10px;
bottom:0px;
    border-radius: 100%;
    background-color: #ffffff;
    height: 100px;
    width: 100px;
animation: move 8s ease-in-out forwards;
position: absolute;
animation-name: move, earth;
}
@keyframes move {
  from {
      right: 5%;
      bottom: 70px;
  }
  to {
      right: 65%;
      bottom:380px;
 
  }
}
@keyframes earth{
 
     0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@msheal · 17.02.2018, 10:52

element.addEventListener("transitionend" , false); - вы не задали колбек, который должен сработать по завершению анимации. А даже если бы задали, это не сработало бы т.к. событие transitionend сработает после конца такой анимации:

CSS
1
2
3
#growing {
  transition: color 2s;
}

Вам нужно событие animationend:

JavaScript
1
2
3
4
5
var element = document.getElementById("toggle");
 
element.addEventListener("animationend", function(){
  $( "#toggle" ).toggle( "explode" );
});

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Очередность анимации css и jQuery

Решение