Comment utiliser SCSS/SASS pour augmenter animation-delay pour simultanées divs

Je suis en train de reproduire l'animation de chargement de Windows 8 les tuiles. Il semble que chaque tuile a une animation du retard, ce qui est légèrement supérieur à celui de son prédécesseur. J'ai été y parvenir à l'heure actuelle, en utilisant nth-child en un moyen inefficace comme vous pouvez le voir ci-dessous. Quelqu'un sait-il une manière que je peux le réaliser de manière plus efficace qui permettrait de répondre à un certain nombre de divs?

DÉMO

.results div:nth-child(1) {
  animation-delay: 0.25s;
}
.results div:nth-child(2) {
  animation-delay: 0.5s;
}
.results div:nth-child(3) {
  animation-delay: 0.75s;
}
.results div:nth-child(4) {
  animation-delay: 1s;
}
.results div:nth-child(5) {
  animation-delay: 1.25s;
}
.results div:nth-child(6) {
  animation-delay: 1.5s;
}
.results div:nth-child(7) {
  animation-delay: 1.75s;
}
.results div:nth-child(8) {
  animation-delay: 2s;
}
  • Puisque chaque préprocesseur CSS sorties de la plaine de vieux CSS, je ne pense pas que c'est possible de gérer un nombre infini d'éléments. Javascript, sur l'autre main...
  • Je pense qu'il peut avec quelqu'un qui sait comment utiliser SASS - Voir cela ressemble et dire la séquence thesassway.com/advanced/math-sequences-with-sass / en.wikipedia.org/wiki/Look-and-say_sequence
  • La seule façon, il serait possible serait le cas si il peut également être fait à la vanille CSS. Je suis sûr que vous pouvez le faire si vous êtes prêt à accepter que vous devez être explicites au sujet de combien il y a d'éléments. Upvoted, j'espère que vous obtenez une bonne réponse.
  • Peut-être un mélange de JS pour le nombre de divs puis vérifier la précédente divs animation de retard et d'ajouter une certaine quantité de temps à ce nombre?
InformationsquelleAutor 2ne | 2013-10-26
  1. 42

    Vous pouvez utiliser une boucle for dans Sass pour ce faire comme suit:

    @for $i from 1 to 10 {
  .results div:nth-child(#{$i}) { animation-delay: $i * 0.25s; }
}

    Alors vous pouvez le faire pour un certain nombre de divs en faire 10 à ce que jamais vous avez besoin.

    • Peut la de 10 de 20, même s'il y a seulement 10?
    • codepen.io/2ne/stylo/bmvcu - Iseem être une erreur de syntaxe avec cette solution?
    • codepen.io/2ne/stylo/bmvcu je l'ai eu!
    • la limite est de dire simplement le pré processeur combien de fois à la sortie de cette boucle de css. il est sans rapport avec le html. vous pouvez le faire à 100 si vous voulez
    InformationsquelleAutor DMTintner
  2. 15
    @for $i from 1 through 10 {
  .results div:nth-child(#{$i}) {
    -webkit-animation-delay:(#{$i*0.1s}); 
    animation-delay:(#{$i*0.1s}); 
  }
}

    Meilleure solution... je l'ai testé et il fonctionne 😉

    • C'est mieux que d'y répondre! Merci man
    • Pourquoi est-ce une meilleure solution?
    • semble through inclure 10 mais to exclure
    InformationsquelleAutor xeth23
  3. 0

    - Je utiliser ce mixin:

    @mixin delay($rule, $number, $value) {
  @for $i from 1 to ($number + 1) {
    &:nth-child(#{$i}) {
      -webkit-#{$rule}-delay: (#{$i*$value});
      #{$rule}-delay: (#{$i*$value});
    }
  }
}

.results div{
  @include delay(animation, 8, 0.25s);
}

    De cette façon, vous pouvez à nouveau utiliser les transitions trop.

    InformationsquelleAutor Victor