Нужно чтобы при следующем нажатии на кнопку был плавный переход от предыдущего элемента новому. Чтобы при вводе других значений, замена происходила с анимацией. Простой 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>