Как создавать блок div внутри div js

Question

Мне нужно, чтобы при клике на кнопку внутри блока page-block создавался блок с классом particle__box, а также к блоку с классом particle__box прибавлялся стиль rotate(320deg), но только значение rotate должно быть рандомным, чтобы анимация проигрывалась по кругу. Помимо этого, внутри particle__box должен создаваться блок с классом particle.

И после того как будет проиграна анимация должен удалится блок particle__box. И так при каждом клике.

Код с анимацией здесь.

<div id="row">
  <div class="page-block">Внутри данного блока должеен создаваться div particle__box</div>
</div>

<button class="addBtn">Создать блок</button>

const addBtn = document.querySelector('.addBtn');
addBtn.onclick = () => {

  const createBlock = document.createElement('div');
    createBlock.className = 'particle__box';
  createBlock.style.transform = 'rotate(320deg)';

    createBlock.className = 'particle';

  addBtn.insertAdjacentElement('beforebegin', createBlock);
}

body {
  background: #000;
  color: #fff;
}

.particle__box {
    left: 50%;
    position: absolute;
    top: 50%;
}
.particle {
    -webkit-animation: particle_anim 1s backwards;
    animation: particle_anim 1s backwards;
    background: #fff;
    border-radius: 100%;
    height: 12px;
    width: 12px;
    z-index: 2;
}

@keyframes particle_anim {
    0% {
    opacity: 1;
    -webkit-transform: translate(2vmin,2vmin) scale(1);
    transform: translate(2vmin,2vmin) scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(35vmin,35vmin) scale(0);
        transform: translate(35vmin,35vmin) scale(0);
    }
}

Answer 1

Если верно понял, как-то так должно быть

Аnimationend - событие возникает, когда CSS-анимация достигает конца своего активного периода

В этот момент и удаляем элемент, остальное должно быть понятно

function randomNumber(min, max) {
  let rand = min - 0.5 + Math.random() * (max - min + 1);
  return Math.round(rand);
}


const addBtn = document.querySelector('.addBtn');
addBtn.addEventListener('click', () => {

  let createBlock = document.createElement('div');
  createBlock.className = 'particle__box';
  createBlock.style.transform = `rotate(${randomNumber(1, 360)}deg)`;

  let createBlockChildren = document.createElement('div');
  createBlockChildren.className = 'particle';

  createBlockChildren.addEventListener('animationend', () => {
    createBlock.remove()
  })

  createBlock.append(createBlockChildren)

  addBtn.insertAdjacentElement('beforebegin', createBlock);


})

body {
  background: #000;
  color: #fff;
}

.particle__box {
  left: 50%;
  position: absolute;
  top: 50%;
}

.particle {
  -webkit-animation: particle_anim 1s backwards;
  animation: particle_anim 1s backwards;
  background: #fff;
  border-radius: 100%;
  height: 12px;
  width: 12px;
  z-index: 2;
}

@keyframes particle_anim {
  0% {
    opacity: 1;
    -webkit-transform: translate(2vmin, 2vmin) scale(1);
    transform: translate(2vmin, 2vmin) scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(35vmin, 35vmin) scale(0);
    transform: translate(35vmin, 35vmin) scale(0);
  }
}

<div id="row">
  <div class="page-block">Внутри данного блока должен создаваться div particle__box</div>
</div>
<button class="addBtn">Создать блок</button>

БЛОГ НА HUSL

Как создавать блок div внутри div js

Ответы (1 шт):