JSFiddle - React, Tailwind, and code Playground

by FiNGAHOLiC

HTML

<div class="status"></div>
<div class="power"></div>
<div class="boxes"></div>

SCSS

body {
  font-size: 10px;
}

.power {
  height: 0;
  overflow: hidden;
}

.boxes {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

.box {
  background: red;
  height: 30px;
  transform: scale(0) rotate(50deg);
  transition: all 0.2s ease-out;
  width: 30px;
  &__show {
    transform: scale(1) rotate(0deg);
  }
}

JavaScript

// 引数で指定された個数のボックスを生成
const generateBoxes = (num) => {
    let delay = 0;
    const canvas = document.querySelector('.boxes');
    for (let i = 0; i < num; i++) {
        const elemBox = document.createElement('div');
        elemBox.setAttribute('class', 'box');
        canvas.append(elemBox);
        setTimeout(() => {
            elemBox.classList.add('box__show');
        }, (delay += 100));
    }
};

// すごい重い処理
const heavyOperation = (num) => {
    const elemStatus = document.querySelector('.status');
    const elemPower = document.querySelector('.power');
    elemStatus.innerHTML = 'start';
    for (let i = 0; i < num; i++){
        const p = document.createElement('p');
        const result = Math.pow(i, i);
        p.innerHTML = result;
        elemPower.appendChild(p);
    }
    elemStatus.innerHTML = 'done';
};

heavyOperation(99999);

window.requestIdleCallback(() => {
    generateBoxes(20);
});