Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
0 / 0 / 0
Регистрация: 28.11.2017
Сообщений: 44
1

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

17.02.2018, 00:24. Показов 1656. Ответов 1

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

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

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

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

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

1
706 / 308 / 191
Регистрация: 05.03.2015
Сообщений: 822
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
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
17.02.2018, 10:52

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

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

Реализация плавной анимации чистый JS+CSS
Доброго вечера друзья. Суть вопроса такова. Есть код, на JS взаимодействующий с CSS. нужно...

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


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru