отменить animation: для класса
Добрый день уважаемые. Вот возник такой вопрос есть ли возможность отменить анимацию для элемента с выбранным классом. Приведу пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#field {
position: relative;
margin-top: 2%;
width: 1200px;
height: 500px;
margin: 2%;
border: 1px solid black;
}
.square {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
z-index: 2;
}
.Circle {
position: absolute;
top: 15%;
left: 15%;
width: 350px;
height: 350px;
background: none;
z-index: 1;
border: 1px solid black;
animation: none;
}
.ggg > div:nth-child(1) {top:0;
left:41%;}
.ggg > div:nth-child(2) {top:15%;
left:77%;}
.ggg > div:nth-child(3) {top:65%;
left:77%;}
.ggg > div:nth-child(4) {top:65%;
left:5%;}
.ggg > div:nth-child(5) {top:15%;
left:5%;}
.ggg {
position: relative;
width: 500px;
height: 500px;
transform-origin: center;
border: 1px solid black;
animation: Circling 4s linear infinite;
}
@keyframes Circling {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)}
}
.ggg > div {
animation: Circling 4s linear infinite reverse;
}
</style>
<body>
<div id="field">
<div class="ggg">
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling Circle"></div>
</div>
</div>
</body>
</html>
Цель такова - что б у элемента с классом Circle не применялась ни какая анимация ( свойство animation: игнорировалось) Я побывал писать исключающую выборку .ggg > div:not(.Circle), и так задавать анимацию, но она мне не подошла. Элемент с классом, всё равно продолжает вертеться. Пробывал прописывать в классе .Circle { animation: none} оно тоже не сработало Пример довольно некрасивый, в оригинале класс .Circle присваиваться через JavaScript и меняет своего хозяина. Дело в том что изначально, на момент загрузки, в DOM дереве нету дива с классом .Circle . И вся система сидит без анимации. Дальше пользователь нажимает на один из элементов class="square" и этому элементу добавляется класс .Circle а его родителю класс с анимацией. И пошла каруселька. Вот. |
Вариант:
Попробовать добавить на страницу элемент с классом .El и для остановки карусельки его удалять (запуск/остановка будет добавкой/удалением элемента) Элемент мон сделать нулевой высоты - ширины Цитата:
|
Black_Star,
2. А попробовать наоборот, запускать ток с добавленным классом ? .ggg >.Circle (А удалением класса попытаться остановить (Ибо :not были придуманы позже анимации, возможно кроссбраузерно они еще не привязаны (ибо в некоторых браузерах отключается 3. Изымать элемент с Анимацией, запоминать положение ротации(или изъять с запаздыванием до нулевого положения поворота, тады угол поворота запоминать не надо), и ставить на место с классом, изъятие из DOM перезапускает css правила на элемент... |
Цитата:
Моя анимация - "каруселька" работает сейчас таким образом - Первый этап - задаем вращение блока с элементами
.ggg {
animation: Circling 4s linear infinite;
}
Второй этап что б компенсировать поворот, всем потомкам задаем ту же анимацию, но в противоположном направлении
.ggg > div {
animation: Circling 4s linear infinite reverse;
}
Если я понял правильно, то вот этот, второй этап Вы предлагаете заменить неким классом .El который будет присваиваться всем потомкам .ggg, кроме того что имеет класс .Circle но это не решит проблему. Первый этап на этом элементе с классом .Circle всё равно будет анатомироваться. |
Но глобальная проблема я всё таки думаю что у меня на момент запуска html файла в DOM дереве файла нету элемента с классом .Circle и наверное, по этой причине css свойство игнорируется
|
Black_Star,
Добавить класс на странице в исходнике, если есть доступ к заливке страницы - нет проблем, или хотя бы её части |
Тут вот такое: https://webref.ru:443/css/animation-play-state
Вариант: кнопка меняет класс у #field
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style type="text/css">
#field {
position: relative;
margin-top: 2%;
width: 1200px;
height: 500px;
margin: 2%;
border: 1px solid black;
}
.square {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
z-index: 2;
}
.Circle {
position: absolute;
top: 15%;
left: 15%;
width: 350px;
height: 350px;
background: none;
z-index: 1;
border: 1px solid black;
animation: none;
}
.ggg > div:nth-child(1) {top:0;
left:41%;}
.ggg > div:nth-child(2) {top:15%;
left:77%;}
.ggg > div:nth-child(3) {top:65%;
left:77%;}
.ggg > div:nth-child(4) {top:65%;
left:5%;}
.ggg > div:nth-child(5) {top:15%;
left:5%;}
.ggg {
position: relative;
width: 500px;
height: 500px;
transform-origin: center;
border: 1px solid black;
}
#field >.ggg{
animation: Circling 4s linear infinite;
animation-play-state: paused;
}
#field.El >.ggg{
animation-play-state: running;
}
@keyframes Circling {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)}
}
#field >.ggg> div {
animation: Circling 4s linear infinite reverse;
animation-play-state: paused;
}
#field.El >.ggg> div {
animation-play-state: running;
}
</style>
<body>
<div id="field" class="El">
<div class="ggg">
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling"></div>
<div class="square moveCircling Circle"></div>
</div>
</div>
<button id="go" type="button" style="float:right">Cтоп/Пуск</button>
<script type="text/javascript">
$('#go').click(function () {
$('#field').toggleClass('El')
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 12:10. |