Мгновенное увеличение ширины и высоты элемента при сохранении его центрального положения с помощью Javascript

Я пытаюсь увеличить ширину и высоту div так, чтобы через определенное время внутренний круг заполнил внешний круг, увеличив его размер. Я могу делать все, но только положение вызывает небольшую проблему. По мере увеличения размеров внутреннего круга он теряет свое центральное положение и увеличивается вправо-вниз. Как я могу продолжать увеличивать его ширину и высоту, но держать его в центре так, чтобы, когда он будет завершен, он полностью заполнил внешний круг. Большое спасибо

var outer, inner, width, interval, height;
inner = document.querySelector(".inner");
width = 0;
height = 0;

window.addEventListener("load", function () {
    interval = setInterval(function () {
        if (width >= 200 && height >= 200) {
            inner.textContent = "100% Completed";
            clearInterval(interval);
        }
        else {

            width += 3.333;
            height += 3.333;
            inner.style.width = width + "px";
            inner.style.height = height + "px";
        }
    }, 1000);
});
.outer {
  width: 200px;
  height: 200px;
  border: 5px solid tomato;
  border-radius: 50%;
  margin: 100px auto;
  position: relative;
}

.inner {
  width: 0;
  height: 0;
  background-color: tomato;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="outer">
    <div class="inner"></div>
  </div>
  
</body>
</html>


javascript html css width height
person knight    schedule 12.10.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вам просто нужно добавить transform: translate(-50%, -50%); в класс круга inner. Это гарантирует правильное центрирование.

var outer, inner, width, interval, height;
inner = document.querySelector(".inner");
width = 0;
height = 0;

window.addEventListener("load", function(){
 
  interval = setInterval(function(){
  
if ( width >= 200 && height >= 200 ) {
  inner.textContent = "100% Completed";
  clearInterval(interval);
}

else {

    width += 3.333;
    height += 3.333;
    inner.style.width = width + "px";
    inner.style.height = height + "px";

}
    
    },500);
  
});
.outer {
  width: 200px;
  height: 200px;
  border: 5px solid tomato;
  border-radius: 50%;
  margin: 100px auto;
  position: relative;
}

.inner {
  width: 0;
  height: 0;
  background-color: tomato;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="outer">
    <div class="inner"></div>
  </div>
  
</body>
</html>

person D-Money    schedule 12.10.2017
comment
Спасибо за быстрый ответ и отличный ответ, палец вверх D-Money - person knight; 12.10.2017