Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
съехавшая крыша
0 / 0 / 0
Регистрация: 28.11.2017
Сообщений: 26
1

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

17.02.2018, 00:24. Просмотров 775. Ответов 1

Всем привет! Есть код, который должен отправлять шарик в полет до определенной точки и потом шарик сам собой должен разрываться. Пока у меня есть только куски - шарик летит, зависает и взрывается по щелчку мышкой. Надо каким то образом сделать так что бы шарик взрывался сам собой без щелчка. Как это сделать я не знаю и уже сломала себе голову
PHPHTML
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);
    }
}
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
17.02.2018, 00:24
Ответы с готовыми решениями:

Очередность анимации
Добрый день, я не силен в jquery, поэтому не судите строго. Сам уже искал...

Не работают jQuery.css и jQUery.attr
Добрый день. Хочу сделать изменение стиля кнопки, при наведении курсора на...

Jquery сохранение анимации
Есть код анимации (прибавляет 50 пикселей), которая не сохраняется после...

Очередь анимации JQuery
добавить 2 ссылки, при нажатии на первую, генерируется точно такой же квадрат,...

Создание анимации посредством jQuery
есть простенькая форма &lt;html &gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot; /&gt;...

1
msheal
690 / 296 / 183
Регистрация: 05.03.2015
Сообщений: 783
17.02.2018, 10:52 2
Лучший ответ Сообщение было отмечено j2FunOnly как решение

Решение

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" );
});
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
17.02.2018, 10:52

ТТТ: jQuery-плагин анимации текста
Рабочее название - TTT, или Тасующаяся Трансформация Текста. Разработан по...

Повторение CSS анимации при клике
Всем привет! Скажите, пожалуйста, как сделать, чтобы при клике у меня заново...

Как в jquery дождаться анимации события, прежде чем начнет отрабатываться новое по другому событию?
Добрый день, Есть 2 div внутри обертки: &lt;div class=&quot;main-menu&quot;&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru