Создание только CSS последовательного постепенного добавления DIV с использованием цикла - PullRequest
Новая
       74

Создание только CSS последовательного постепенного добавления DIV с использованием цикла

0 голосов
/ 02 ноября 2019

Следующий код использует jQuery. Можно ли создать версию только для CSS, используя цикл. Я видел примеры показа DIV, но каждый DIV был отдельно закодирован с временной задержкой. Такие коды потребуют обновления CSS, если я добавлю дополнительные DIV. Вместо этого я хотел бы использовать какой-то цикл в CSS, если это возможно. 

$("#main-container div").each(function(i) {
  $(this).delay(500 * i).fadeIn(1500);
});
.ig-element {
  width: 200px;
  height: 200px;
  float: left;
  border: 1px solid grey;
  display: none;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-container">

  <div class="ig-element">a</div>
  <div class="ig-element">b</div>
  <div class="ig-element">c</div>

  <div class="ig-element">d</div>
  <div class="ig-element">e</div>
  <div class="ig-element">f</div>

  <div class="ig-element">g</div>
  <div class="ig-element">h</div>
  <div class="ig-element">i</div>

</div>

1 Ответ

0 голосов
/ 02 ноября 2019

Вы не можете делать циклы только с использованием чистого CSS. Но вы можете сделать это, если вы используете CSS препроцессоры, такие как SASS или LESS, например:

SASS 

@for $i from 1 through 9 {
    .#main-container:nth-child(#{$i}n) {
        animation-delay: {$i * 0.5}s;
    }
}

LESS 

.mixin-loop (@i) when (@i > 0) {
  // Output the current counter
  .main-container:nth-child(@{i}) {
    animation-delay: {@i * 0.5}s;
  } 
  // The mixin calls itself, recursively
  // until the "@i > 0" condition is no longer met
  .mixin-loop(@i - 1);
}

// Call the mixin with a counter to start the loop
.mixin-loop(9);

Вы можете найти больше способов и узнать больше по этой ссылке .

...