Моментално увеличаване на ширината и височината на елемент, като същевременно запазва централната му позиция с 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