JSFiddle - React, Tailwind, and code Playground

by FiNGAHOLiC

HTML

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

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div...

SCSS

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

.box {
  background: yellow;
  height: 200px;
  margin: 0 auto;
  transition: background-color 2s ease-out;
  width: 200px;
  &--inside {
    background-color: red;
  }
  & + & {
    margin-top: 10px;
  }
}

JavaScript

const targets = document.querySelectorAll('.box');

// すごい重い処理
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';
};

const intersectionObserver = new IntersectionObserver((changes) => {
    changes.forEach((change) => {
        const target = change.target;
        if (change.intersectionRatio > 0) {
        		heavyOperation(4);
            target.classList.add('box--inside');
            intersectionObserver.unobserve(target);
        }
    });
});

Array.from(targets).forEach((target) => {
    intersectionObserver.observe(target);
});