Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.10.2016, 07:59
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

отменить 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 а его родителю класс с анимацией. И пошла каруселька. Вот.
Ответить с цитированием
  #2 (permalink)  
Старый 28.10.2016, 08:08
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Вариант:
Попробовать добавить на страницу элемент с классом .El и для остановки карусельки его удалять (запуск/остановка будет добавкой/удалением элемента) Элемент мон сделать нулевой высоты - ширины
Цитата:
080 .ggg >.El+div {
081
082 animation: Circling 4s linear infinite reverse;
083 }

Последний раз редактировалось Deff, 28.10.2016 в 08:16.
Ответить с цитированием
  #3 (permalink)  
Старый 28.10.2016, 08:20
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Black_Star,
2. А попробовать наоборот, запускать ток с добавленным классом ?
.ggg >.Circle (А удалением класса попытаться остановить (Ибо :not были придуманы позже анимации, возможно кроссбраузерно они еще не привязаны (ибо в некоторых браузерах отключается

3. Изымать элемент с Анимацией, запоминать положение ротации(или изъять с запаздыванием до нулевого положения поворота, тады угол поворота запоминать не надо), и ставить на место с классом, изъятие из DOM перезапускает css правила на элемент...

Последний раз редактировалось Deff, 28.10.2016 в 08:25.
Ответить с цитированием
  #4 (permalink)  
Старый 28.10.2016, 09:08
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Сообщение от Deff
Вариант:
Попробовать добавить на страницу элемент с классом .El и для остановки карусельки его удалять (запуск/остановка будет добавкой/удалением элемента) Элемент мон сделать нулевой высоты - ширины
Цитата:
080 .ggg >.El+div {
081
082 animation: Circling 4s linear infinite reverse;
083 }
Я не очень понял что Вы имеете ввиду.
Моя анимация - "каруселька" работает сейчас таким образом -
Первый этап - задаем вращение блока с элементами
.ggg {
animation: Circling 4s linear infinite;
}

Второй этап что б компенсировать поворот, всем потомкам задаем ту же анимацию, но в противоположном направлении
.ggg > div {
 
    animation: Circling 4s linear infinite reverse;
}

Если я понял правильно, то вот этот, второй этап Вы предлагаете заменить неким классом .El который будет присваиваться всем потомкам .ggg, кроме того что имеет класс .Circle но это не решит проблему. Первый этап на этом элементе с классом .Circle всё равно будет анатомироваться.
Ответить с цитированием
  #5 (permalink)  
Старый 28.10.2016, 09:12
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Но глобальная проблема я всё таки думаю что у меня на момент запуска html файла в DOM дереве файла нету элемента с классом .Circle и наверное, по этой причине css свойство игнорируется
Ответить с цитированием
  #6 (permalink)  
Старый 28.10.2016, 09:29
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Black_Star,
Добавить класс на странице в исходнике, если есть доступ к заливке страницы - нет проблем, или хотя бы её части
Ответить с цитированием
  #7 (permalink)  
Старый 28.10.2016, 10:06
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Тут вот такое: 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>

Последний раз редактировалось Deff, 28.10.2016 в 10:11.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
SEOCRM - бесплатные инструменты для оптимизаторов, интернет-маркетологов и владельце SeoCRM Оффтопик 0 23.05.2016 11:59
Отменить событие для ячейки таблицы kot_k_k jQuery 4 19.02.2016 13:46
Требуется программист на QML для создания интерфейса клиентской программы для общения m.simakov Работа 0 11.02.2016 18:07
Использование классов в JavaScript devote Ваши сайты и скрипты 70 01.02.2013 17:17