Список CSS постепенно появляется с неизвестной величиной

#html #css #css3 #анимация

Я пытался сделать постепенный fadein, используя обычный CSS.
  Строки в списке должны   появляться одна за другой. 
Решение должно быть без jquery   

Я знаю, как это сделать для ограниченного количестве строк. Но, как мне закодировать
css так, чтобы независимо от того, сколько у меня строк в списке, это бы работало.   

Вот что я сделал:  



.ladder {
  opacity: 0;
  -webkit-animation: fadeIn 0.9s 1;
  animation: fadeIn 0.9s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.ladder:nth-child(5n+1) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.ladder:nth-child(5n+2) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.ladder:nth-child(5n+3) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.ladder:nth-child(5n+4) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.ladder:nth-child(5n+5) {
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
A
B
C
D
E


    

Мой вопрос: как заставить css работать независимо от того, сколько  строк в списке.  
    

Ответы

Ответ 1

Настраивая в стилях начальный вид и конечный, можно делать что угодно.



/* Функция для применения стиля к набору 
   элементов с определённым селектором,
   с приращением заданной задержки на
   каждом последующем элементе.
   
   fSmoothShowItems(sSelector, nDelay[, bOrder]);
   
   sSelector - (string) Селектор по которому происходит выборка
   nDelay    - (number) Задержка между анимациями, в секундах
   bOrder    - (boolean) Порядок анимации (true - прямой, по умолчанию)
*/
function fSmoothShowItems(sSelector, nDelay, bOrder) {
  // Задержка перед началом вывода
  let i = 0;
  // Приводим к настоящему массиву полученную коллекцию элементов с нужным селектором
  let aItems = Array.prototype.slice.call(document.querySelectorAll(sSelector), 0);
  // Если указан обратный порядок, тогда...
  if (bOrder === false) {
    // Обращаем массив
    aItems.reverse()
  };
  // Для каждого элемента массива...
  aItems.forEach(function(element) {
    // Добавляем в inline стиль свойство transition-delay с вычесленной задержкой
    element.style.transitionDelay = i + 's';
    // Добавляем класс fader с конечным видом
    element.classList.add('fader');
    // Приращение задержки для следующего элемента
    i += nDelay;
  });
}

// Запускаем функцию только после полной загрузки сраницы
window.addEventListener('load', event => {

  // Селектор:'.ladder' Задержка:400мс [Порядок:прямой]
  fSmoothShowItems('.ladder', .4);
  // Селектор:'.ladder2' Задержка:1200мс Порядок:прямой
  fSmoothShowItems('.ladder2', 1.2, true);
  // Селектор:'.ladder3' Задержка:700мс Порядок:обратный
  fSmoothShowItems('.ladder3', .7, false);

});
ul {
  display: inline-block;
  width: 20%;
}

.ladder {
  opacity: 0;
  border: 1px solid #f00;
}

.ladder2 {
  opacity: 0;
  border: 1px solid #fd0;
}

.ladder3 {
  opacity: 0;
  border: 1px solid #080;
}

/*
Имя этого класса должно совпадать с именем
класса, который добавляется функцией.
*/
.fader {
  opacity: 1;
  transition-property: opacity;
  /* Плавность появления */
  transition-duration: 1.2s;
}

  
A
  
B
  
C
  
D
  
E


  
A
  
B
  
C
  
D
  
E


  
A
  
B
  
C
  
D
  
E



Ответ 2

Вот идея с использованием переменных CSS, которая позволяет вам уменьшить код.  

Это не общее решение, но проще добавить простой, встроенный CSS для каждого li, чем
написать сложный CSS:   



.ladder {
  opacity: 0;
  animation: fadeIn 1s var(--d) forwards;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

  
A
  
B
  
C
  
D
  
E





Вот еще одна идея, где вы можете применить анимацию на ul:



ul {
  position:relative;
}
ul:before {
  content:"";
  position:absolute;
  top:-20px;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(to bottom,transparent,#fff 20px);
  animation:fadeIn 2s forwards
}

@keyframes fadeIn {
  0% {
    top:-10px;
  }
  100% {
    top: 100%;
  }
}

  
A
  
B
  
C
  
D
  
E



Ответ 3

let li = document.querySelectorAll('li');
for (let i = 0, len = li.length; i < len; i++) {
  li[i].style.animationDelay = (i / 3.333) + 's'
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  animation: x 1s forwards;
  opacity: 0;
}

@keyframes x {
  to {
    opacity: 1;
  }
}

  
A
  
B
  
C
  
D
  
E
  
F
  
G
  
H
  
I
  
J
  
K
  
L
  
M
  
N
  
O
  
P
  
Q