0

Когда с помощью margin-а хочу поставить <div>-и перемещается и задняя как можно сделать так чтобы все круги были на середине

let big = document.getElementById('bigCircle')
let betw = document.getElementById('between')
let last = document.getElementById('last')

function bigCirc() {
  let size = 10;
  let inter = setInterval(() => {
    size += 10
    big.style.width = size + 'px'
    big.style.height = size + 'px'
    if (size == 400) {
      clearInterval(inter)
    }
  }, 30)
}

function between() {
  let size = 5;
  let inter = setInterval(() => {
    size += 5
    betw.style.width = size + 'px'
    betw.style.height = size + 'px'
    if (size == 300) {
      clearInterval(inter)
    }
  }, 30)
}

function laster() {
  let size = 4;
  let inter = setInterval(() => {
    size += 4
    last.style.width = size + 'px'
    last.style.height = size + 'px'
    if (size == 200) {
      clearInterval(inter)
    }
  }, 30)
}
laster()
between()
bigCirc()
#bigCircle {
  border: 5px;
  border-radius: 50%;
  width: 1px;
  height: 1px;
  background-color: red;
}

#between {
  border: 5px;
  border-radius: 50%;
  width: 1px;
  height: 1px;
  background-color: blue;
  margin-left: 10%;
  margin-top: 10px;
}

#last {
  border: 5px;
  border-radius: 50%;
  width: 1px;
  height: 1px;
  background-color: yellow;
  margin-left: 10%;
  margin-top: 10px;
}
<div id='bigCircle'>
  <div id='between'>
    <div id=last>

    </div>
  </div>
</div>

2 ответа 2

2

Если вы хотите анимировать круги, лучше вам использовать canvas или svg, там это намного удобнее делается

let big = document.getElementById('bigCircle')
let betw = document.getElementById('between')
let last = document.getElementById('last')

function bigCirc() {
  let size = 10;
  let inter = setInterval(() => {
    size += 10
    big.style.width = size + 'px'
    big.style.height = size + 'px'
    if (size == 400) {
      clearInterval(inter)
    }
  }, 30)
}

function between() {
  let size = 5;
  let inter = setInterval(() => {
    size += 5
    betw.style.width = size + 'px'
    betw.style.height = size + 'px'
    if (size == 300) {
      clearInterval(inter)
    }
  }, 30)
}

function laster() {
  let size = 4;
  let inter = setInterval(() => {
    size += 4
    last.style.width = size + 'px'
    last.style.height = size + 'px'
    if (size == 200) {
      clearInterval(inter)
    }
  }, 30)
}
laster()
between()
bigCirc()
#bigCircle {
  border: 5px;
  border-radius: 50%;
  width: 1px;
  height: 1px;
  background-color: red;
  margin: 0 auto;
}

#between {
  border: 5px;
  border-radius: 50%;
  width: 1px;
  height: 1px;
  background-color: blue;
  margin: 0 auto;
}

#last {
  border: 5px;
  border-radius: 50%;
  width: 1px;
  height: 1px;
  background-color: yellow;
  margin: 0 auto;
}
<div id='bigCircle'>
  <div id='between'>
    <div id=last>

    </div>
  </div>
</div>

Вариант с transform: translate

let big = document.getElementById('bigCircle');
let betw = document.getElementById('between');
let last = document.getElementById('last');

function bigCirc() {
  const maxSize = 400;
  let size = 5;
  let inter = setInterval(() => {
    size += 5;
    big.style.width = size + 'px'
    big.style.height = size + 'px'
    if (size >= maxSize) {
      clearInterval(inter);
      between();
    }
  }, 16);
}

function between() {
  const maxSize = 300;
  let size = 2.5;
  let inter = setInterval(() => {
    size += 2.5;
    betw.style.width = size + 'px'
    betw.style.height = size + 'px'
    if (size >= maxSize) {
      clearInterval(inter);
      laster();
    }
  }, 16);
}

function laster() {
  const maxSize = 200;
  let size = 1.5;
  let inter = setInterval(() => {
    size += 1.5;
    last.style.width = size + 'px'
    last.style.height = size + 'px'
    if (size >= maxSize) {
      clearInterval(inter);
    }
  }, 16);
}

function start() {
  bigCirc();
}

start();
#bigCircle, #between, #last {
  border: 5px;
  border-radius: 50%;
  --size: 10px;
  width: var(--size);
  height: var(--size);
}

#between, #last {
  position: absolute;
  bottom: 50%;
  right: 50%;
  transform: translate(50%, 50%);
}

#bigCircle {
  background-color: red;
  margin: 0 auto;
  position: relative;
}

#between {
  background-color: blue;
  --size: 30px;
}

#last {
  background-color: yellow;
}
<div id='bigCircle'>
  <div id='between'>
    <div id=last>

    </div>
  </div>
</div>

Я бы сделал это на промисах, чтобы удобно смотреть когда анимация закончилась и requestAnimationFrame для плавной анимации

const bigElem = document.getElementById('bigCircle');
const betwElem = document.getElementById('between');
const lastElem = document.getElementById('last');

function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction изменяется от 0 до 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // вычисление текущего состояния анимации
    let progress = timing(timeFraction);

    draw(progress); // отрисовать её

    if (timeFraction < 1) requestAnimationFrame(animate);

  });
}

function animationStart() {
  const options = {
    elem: bigElem,
    size: 300,
    duration: 2000,
  };
  animationElem(options).then(res => {
    console.log('Первая анимация закончилась');

    const options = {
      elem: betwElem,
      size: 200,
      duration: 2000,
    };
    return animationElem(options);
    
  }).then(res => {
    console.log('Вторая анимация закончилась');

    const options = {
      elem: lastElem,
      size: 100,
      duration: 1000,
    };
    return animationElem(options);
    
  }).then(res => {
    console.log('Третья анимация закончилась');
  });
}

function animationElem(options) {
  return new Promise(resolve => {
    animate({
      duration: options.duration,
      timing(timeFraction) {
        return Math.pow(timeFraction, 2);
      },
      draw(progress) {
        options.elem.style.width = (progress * options.size) + 'px';
        options.elem.style.height = (progress * options.size) + 'px';
        if (progress === 1) resolve(true);
      }
    });
  });
}

animationStart();
#bigCircle,
#between,
#last {
  border: 5px;
  border-radius: 50%;
}

#between,
#last {
  position: absolute;
  bottom: 50%;
  right: 50%;
  transform: translate(50%, 50%);
}

#bigCircle {
  background-color: red;
  margin: 0 auto;
  position: relative;
}

#between {
  background-color: blue;
}

#last {
  background-color: yellow;
}
<div id="bigCircle">
  <div id="between">
    <div id="last">

    </div>
  </div>
</div>

3
  • Спасибо но я хочу чисто JS использовать но к сожалению ваш код не дал ожидаемого результата
    – Developer
    Commented 21 окт. 2020 в 10:28
  • 1
    @Developer тут на stackoverflow круг выровнен по центру с помощью margin, как вы хотели Commented 21 окт. 2020 в 10:29
  • ой да извините не заметил
    – Developer
    Commented 21 окт. 2020 в 10:30
1

как вариант можно использовать такой подход:

с мы сначала смещает объект направо на 50% с помощью свойства left: 50%, а потом обратно на те же 50% с помощью свойства transform: translationX(-50%)

    .big_c {
        position:   relative;
        
        width:      100px;
        height:     100px;
        
        border: 1px solid red;
        border-radius:  50px;       
    }

    .middle_c {
        position:   relative;

        width:      50px;
        height:     50px;
        
        border: 1px solid lime;
        border-radius:  25px;

        left:       50%;
        top:        50%;
        transform:  translate(-50%, -50%)
    }

    .small_c {
        position:   relative;

        width:  25px;
        height: 25px;
        
        border: 1px solid blue;
        border-radius:  25px;       

        left:       50%;
        top:        50%;
        transform:  translate(-50%, -50%)
    }
<div class = 'big_c'>
    <div class = 'middle_c'>
        <div class = 'small_c'>
        </div>
    </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.