Javascript-форум - Как сделать, чтобы блоки появлялись вместо уже существующих?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как сделать, чтобы блоки появлялись вместо уже существующих? (https://javascript.ru/forum/misc/80701-kak-sdelat-chtoby-bloki-poyavlyalis-vmesto-uzhe-sushhestvuyushhikh.html)

рони,
а можете еще сделать, чтобы цифры в серых ячейках тоже были прописаны в виде дивов в хтмл страницы? Чтобы я мог туда помещать не только цифры а все что угодно?

Lefseq,
:-?

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
.box-container {
  width: 232px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}

.box-container div {
  height: 50px;
  width: 50px;
  text-align: center;
  background-color: hsla(0, 0%, 75%, 1);
  line-height: 50px;
  position: relative;
}
.box-container div .items{
 margin: 0;
 position: absolute;
 content: attr(data-letter);
 left: 0;
 top: 0;
 width: 100%;
 background-color: hsla(167, 100%, 30%, 1);
 display: block;
 opacity: 0;
 transition-duration: 1s;
 transition-delay: var(--delay);
}
.box-container.show div .items{
 opacity: 1;
}
    </style>

</head>
<body>
<div class="box-container">
  <div class="block"><div class="num">1</div><div class="items">один</div></div>
  <div class="block"><div class="num">2</div><div class="items">два</div></div>
  <div class="block"><div class="num">3</div><div class="items">три</div></div>
  <div class="block"><div class="num">4</div><div class="items">четыре</div></div>
</div>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
class RandomFadeIn {
   constructor(cls, delay=1350, pause=300){
   this.parent = document.querySelector(cls);
   this.items = this.parent.children;
   delay = Array.from({length : this.items.length}, (v,k) => delay * k);
   Array.from(this.items).forEach((el,i) => {
             i = delay.length * Math.random()|0;
             i = delay.splice(i, 1)[0];
             el.style.setProperty("--delay", `${i}ms`)
          });
   window.setTimeout(()=> this.parent.classList.add("show"), pause);
   }
}
new RandomFadeIn(".box-container")
  });
</script>


</body>
</html>

рони,
то что надо, спасибо большое

рони,
Еще, если вам не сложно, помогите сделать, чтобы некоторые из серых блоков (тут это блок номер 1) до момента превращения их в зеленые могли бы быть ссылками.

<div class="box-container">
  <div class="block"><div class="num"><a href="https://google.com/" style="display:block;">1</a></div><div class="items">один</div></div>
  <div class="block"><div class="num">2</div><div class="items">два</div></div>
  <div class="block"><div class="num">3</div><div class="items">три</div></div>
  <div class="block"><div class="num">4</div><div class="items">четыре</div></div>
</div>

Lefseq,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
.box-container {
  width: 232px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}

.box-container div {
  height: 50px;
  width: 50px;
  text-align: center;
  background-color: hsla(0, 0%, 75%, 1);
  line-height: 50px;
  position: relative;
}
.box-container div .items{
 margin: 0;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 background-color: hsla(167, 100%, 30%, 1);
 display: block;
 opacity: 0;
 z-index: -1;
 transition: 1s var(--delay);
}
.box-container.show div .items{
 opacity: 1;
 z-index: 1;
}
    </style>

</head>
<body>
<div class="box-container">
  <div class="block"><div class="num"><a href="https://google.com/" style="display:block;">1</a></div><div class="items">один</div></div>
  <div class="block"><div class="num">2</div><div class="items">два</div></div>
  <div class="block"><div class="num">3</div><div class="items">три</div></div>
  <div class="block"><div class="num">4</div><div class="items">четыре</div></div>
</div>

<script>
document.addEventListener( "DOMContentLoaded" , function() {
class RandomFadeIn {
   constructor(cls, delay=1350, pause=300){
   this.parent = document.querySelector(cls);
   this.items = this.parent.children;
   delay = Array.from({length : this.items.length}, (v,k) => delay * k);
   Array.from(this.items).forEach((el,i) => {
             i = delay.length * Math.random()|0;
             i = delay.splice(i, 1)[0];
             el.style.setProperty("--delay", `${i}ms`)
          });
   window.setTimeout(()=> this.parent.classList.add("show"), pause);
   }
}
new RandomFadeIn(".box-container")
  });
</script>


</body>
</html>

рони,
Огромное спасибо)