<section class="section" style="--showCount: 8;">
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
  <div class="section__item hide" data-aos="fade"></div>
</section>
<section class="actions hide">
  <button type="button" class="btn">Show me all!</button>
</section>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.section {
  $hide: var(--hiddeFrom);
  --hide: var(--hiddeFrom);
  display: grid;
  grid-template-columns: repeat(4, calc(100% / 5 - 20px));
  justify-content: space-between;
}
.section__item {
  height: 100px;
  outline: 1px solid tomato;
  margin-bottom: 20px;
  transform: scaleY(1);
  opacity: 1;
  transition: scaleY 0.5s ease, opacity 0.5s ease;
  //НЕ РОБИТ!!!!
  // &:nth-child(n + var(--hide)) {
  //   display: none;
  // }
}

.hide {
  opacity: 0;
  transform: scaleY(0);
  display: none;
}

[data-aos^="fade"][data-aos^="fade"].aos-animate {
  opacity: 1;
  transform: translateZ(0);
}

const items = document.querySelectorAll(".section__item");
const prop = document.querySelector(".section").style.getPropertyValue("--showCount");
const actions = document.querySelector(".actions");
const btn = document.querySelector(".btn");
//let counter = 0;
//console.log(prop)
// items.forEach(elem=>{
//   if(counter < prop){
//     elem.classList.add("")("active");
//   }
//   counter++;
// })

for(var elem = 0; elem < prop; elem++){
  items[elem].classList.remove("hide")
}

if(items > prop){
  actions.classList.remove("hide");  
  btn.addEventListener('click', ()=>{
   items.forEach(elem=>{
     if(elem.classList.contains("hide")){
       elem.classList.remove("hide");
     }
     
   }) 
    actions.classList.add("hide"); 
  })
} 
if(prop == 0){
  console.log(prop)
  items.forEach(elem=>{
    elem.classList.remove("hide");
    actions.classList.add("hide"); 
  })
}
document.querySelectorAll(".section__item").forEach((item, index) => {
    item.style.transitionDelay = .1*(0 + index) + 's';
  });

AOS.init({
  duration: 2000,
  delay:200
})

//data-aos-duration="2000" data-aos-delay="200"
//http://grid-layout.com/animation.html
//https://www.youtube.com/watch?v=vrEHi8kp8M4
//https://stackoverflow.com/questions/64692877/how-to-change-html-aos-delay-value-using-javascript-or-css