Анимация css по кнопке js

114

06 августа 2019, 21:40

Сначала должен быть пусто фон,после нажатия на кнопку начать анимацию появляется квадрат и начинает вращаться,после нажатия на кнопку удалить анимацию удаляется этот квадрат и возращаеться пустой фон

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.square{
  width: 80px;
  height: 80px;
  margin: 30px auto;
  background-color: #A52A2A;
animation-name: spin;
animation-duration: 2s;
}
@keyframes spin{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
</style>


</head>
<body>

 <div class="square"> </div>

<script type="text/javascript">
btn1=document.createElement('BUTTON');  // создание кнопки
btn1.id='cmd1';  // id кнопки
btn1.onclick = function(){ // функция при клике по ней
}
btn1.textContent ='начать анимацию'; // имя кнопки
document.body.appendChild(btn1); // нужно для добавления кнопки
btn2=document.createElement('BUTTON');  // вторая кнопка
btn2.id='cmd2';
btn2.onclick = function(){
}
btn2.textContent ='удалить анимацию'; // имя кнопки
document.body.appendChild(btn2);
</script>
</body>
</html>

Answer 1

btn1 = document.createElement('BUTTON');  // создание кнопки 
btn1.id = 'cmd1';  // id кнопки 
btn1.onclick = function () { // функция при клике по ней 
	document.getElementsByClassName('square')[0].style.display = 'block'; 
} 
btn1.textContent = 'начать анимацию'; // имя кнопки 
document.body.appendChild(btn1); // нужно для добавления кнопки 
 
btn2 = document.createElement('BUTTON');  // вторая кнопка 
btn2.id = 'cmd2'; 
btn2.onclick = function () { 
	document.getElementsByClassName('square')[0].style.display = 'none'; 
} 
btn2.textContent = 'удалить анимацию'; // имя кнопки 
document.body.appendChild(btn2);

.square { 
	width: 80px; 
	height: 80px; 
	margin: 30px auto; 
	background-color: #A52A2A; 
	animation-name: spin; 
	animation-duration: 2s; 
	display: none; 
} 
 
@keyframes spin { 
	0% { 
		transform: rotate(0deg); 
	} 
	100% { 
		transform: rotate(360deg); 
	} 
}