Показать сообщение отдельно
  #4 (permalink)  
Старый 20.02.2020, 14:33
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,709

Cтранно смншивать show/hide и fadeIn
Это, насколькоя я помню, немного разные вещи.
fadeIn делает элемент непрозрачным
А show/hide показывают/убирают через display:
Но, как написано, так и перевожу

Определить дополнительно стили

/*Многие современные браузеры используют это по умолчанию, но лишним не будет*/
[hidden] {
  display:none;
}

.fadein {
  opacity: 1;
}


document.addEventListener("DOMContentLoaded", () => {
  let list = document.querySelectorAll(".wrapper-boxes .box")
  var numToShow = 10;
  var button = document.querySelectorAll("button");
  var numInList = list.length;
  list.forEach(el => el.hidden = true)
  if (numInList > numToShow) {
//    button.show();  // ??? А как они были скрыты
// Если через hidden то
       button.forEach(el => el.hidden = false)   
  }
  list.slice(0, numToShow).forEach(el => el.hidden = false);
  button.forEach(el => {
    el.addEventListener("click", () => {
      var showing = document.querySelectorAll('.wrapper-boxes .box:visible').length
	  list.slice(showing - 1, showing + numToShow).forEach(el => el.classList.add('fadein'));
      var nowShowing = document.querySelectorAll('.wrapper-boxes .box:visible').length
      if (nowShowing >= numInList) {
        button.forEach(el => el.hidden = true)
      }
    })  
  })
})
Ответить с цитированием