Как анимировать переход div-ов

129
13 марта 2021, 08:00

Нужно чтобы при следующем нажатии на кнопку был плавный переход от предыдущего элемента новому. Чтобы при вводе других значений, замена происходила с анимацией. Простой transition не работает, так как функция каждый раз создает новый элемент и уже "transition: 1s" не катит. Может как то через setTimeout() или что другое есть. Подскажите как сделать красивое появление нового элемента?

var create = false; // false - not created || true - created 
function foo(){ 
	var body = document.getElementById('body'), 
		w = document.getElementById('w').value, 
		h = document.getElementById('h').value, 
		r = document.getElementById('r').value, 
		div = document.createElement('div'); //create element(div) 
	if(create == true){ 	// div already created 
		var field = document.getElementById('field'); 
		body.removeChild(field); 
		body.appendChild(div); 
	} 
	if(create == false){	// div not created 
		if(w == "" && h == ""){ 	// stop func if w && h = nothing 
			return; 
		} 
		else{	// create div 
			body.appendChild(div); 
			create = true; 
		} 
	} 
		div.style.height = h + 'px'; 
		div.style.width = w + 'px'; 
		div.style.borderRadius = r + 'px'; 
		div.style.border = '1px solid white'; 
		div.id = 'field'; 
}
body{ 
	background-color: #184287; 
	transition: 1s; 
} 
h1{ 
	font-family: Arial, sans-serif; 
	font-size: 35px; 
	padding: 10px; 
	width: 100%; 
	color: #fff; 
	margin: 0px; 
	text-align: center; 
	margin-bottom: 10px; 
} 
input{ 
	margin-bottom: 20px; 
	outline: none; 
	transition: 1s; 
	border: none; 
	border-radius: 5px; 
}
<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<link rel="stylesheet" href="style.css"> 
	<script src="main.js"></script> 
</head> 
<body id="body"> 
	<h1>Show size</h1> 
	<input type="text" placeholder="Width" id="w"> 
	<input type="text" placeholder="Height" id="h"> 
	<input type="text" placeholder="Radius" id="r"> 
	<button onclick="foo()">Create</button> 
</body> 
</html>

Answer 1

var create = false, 
  obj = { 
    w: 0, 
    h: 0, 
    r: 0, 
  }, 
 
  previousW, 
  previousH, 
  previousR; 
 
function foo() { 
  obj.w = +document.getElementById('width').value; 
  obj.h = +document.getElementById('height').value; 
  obj.r = +document.getElementById('radius').value; 
 
  div = document.createElement('div'); 
  div.style.height = obj.h + 'px'; 
  div.style.width = obj.w + 'px'; 
  div.style.borderRadius = obj.r + 'px'; 
  div.style.border = '1px solid white'; 
  div.id = 'field'; 
 
  if (!create) { 
    if (!obj.w && !obj.h && !obj.r) { 
      return; 
    } else { 
      document.body.appendChild(div); 
      create = true; 
 
      //Присваиваем, чтобы узнать предыдущие размеры 
      previousW = obj.w; 
      previousH = obj.h; 
      previousR = obj.r; 
    } 
  } else { 
    var timer = setInterval(() => { 
 
      // Сравниваем текущие длину и ширину с введёнными 
      if (parseInt(getComputedStyle(document.querySelector('#field')).width) >= obj.w && 
        parseInt(getComputedStyle(document.querySelector('#field')).height) >= obj.h) { 
        clearInterval(timer); 
        return; 
      } 
 
      draw(); 
 
    }, 100); //Время в ms 
  } 
} 
 
function draw() { 
  previousW += 1; 
  previousH += 1; 
  previousR += 1; 
 
  if (parseInt(getComputedStyle(document.querySelector('#field')).width) <= obj.w) { 
    document.querySelector('#field').style.width = previousW + 'px'; 
  } 
 
  if (parseInt(getComputedStyle(document.querySelector('#field')).height) <= obj.h) { 
    document.querySelector('#field').style.height = previousH + 'px'; 
  } 
 
  if (parseInt(getComputedStyle(document.querySelector('#field')).borderRadius) <= obj.r) { 
    document.querySelector('#field').style.borderRadius = previousR + 'px'; 
  } 
}
body { 
  background-color: #184287; 
} 
 
h1 { 
  font-family: Arial, sans-serif; 
  font-size: 35px; 
  padding: 10px; 
  width: 100%; 
  color: #fff; 
  margin: 0px; 
  text-align: center; 
  margin-bottom: 10px; 
} 
 
input { 
  margin-bottom: 20px; 
  outline: none; 
  border: none; 
  border-radius: 5px; 
} 
 
button:target div { 
  width: 50px; 
  transition: width 5s; 
}
<h1>Show size</h1> 
<input type="text" placeholder="Width" id="width"> 
<input type="text" placeholder="Height" id="height"> 
<input type="text" placeholder="Radius" id="radius"> 
<button onclick="foo()">Create</button>

Моё решение неполное: блок может только увеличиваться. Но, я думаю, ничего сложного для вас не составит доработать этот момент. Надеюсь, моё решение натолкнёт вас на мысль :)

Answer 2

Обычный transition должен работать:

function foo(){ 
	var body = document.getElementById('body'), 
		w = document.getElementById('w').value, 
		h = document.getElementById('h').value, 
		r = document.getElementById('r').value, 
    div = document.getElementById('field'); 
  if (!div) {// Ещё не создан, создаём 
    div = document.createElement('div'); 
    div.id = 'field'; 
    div.style.border = '1px solid white'; 
    div.classList.add('animated'); 
    body.appendChild(div); 
  } 
  if(w == "" && h == ""){ 	// stop func if w && h = nothing 
    return; 
  } 
  div.style.height = h + 'px'; 
  div.style.width = w + 'px'; 
  div.style.borderRadius = r + 'px'; 
}
body{ 
	background-color: #184287; 
} 
h1{ 
	font-family: Arial, sans-serif; 
	font-size: 35px; 
	padding: 10px; 
	width: 100%; 
	color: #fff; 
	margin: 0px; 
	text-align: center; 
	margin-bottom: 10px; 
} 
input{ 
	margin-bottom: 20px; 
	outline: none; 
	border: none; 
	border-radius: 5px; 
} 
.animated { 
  transition: 3s; 
}
<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<link rel="stylesheet" href="style.css"> 
	<script src="main.js"></script> 
</head> 
<body id="body"> 
	<h1>Show size</h1> 
	<input type="text" placeholder="Width"  id="w"> 
	<input type="text" placeholder="Height" id="h"> 
	<input type="text" placeholder="Radius" id="r"> 
	<button onclick="foo()">Create</button> 
</body> 
</html>

READ ALSO
Как работают эти 2 примера кода?
javascript

Как работают эти 2 примера кода?

Как, почему этот код возвращает именно сумму элементов подмассива, а не сумму всех элементов или нуль?Я так понимаю, что в partialSum добавляются...

 121
Некорректная работа баллона на iPhone 5S/SE
javascript

Некорректная работа баллона на iPhone 5S/SE

При открытии баллона на iPhone 5S/SE содержимое, которое должно отображаться в нижней части карты уплываем ниже контейнера карты и как следствие...

 86
CORS + AXIOS+REACTJS
javascript

CORS + AXIOS+REACTJS

Пишу клиента, используя ReactJS, для http запросов использую axios, делаю пост запрос к серверу, на сервере запрос обрабатывается и возвращает данные...

 123
Как работает сериализация?
javascript

Как работает сериализация?

 133