Transitions CSS échelonnées

La mise en œuvre de visuels intéressants lorsque les éléments planent, comme les éléments en mouvement, est très simple. Mais s'il y a plusieurs éléments de liste et que vous souhaitez que le mouvement de chaque élément de liste ait un temps d'animation entrelacé, comment pouvez-vous y parvenir?

Le code suivant montre comment réaliser l'effet d'animation entrelacé via l'attribut transition-delay . Tout d'abord, nous sélectionnons chaque élément de liste et appliquons un délai différent:

 @media (Hover: Hover) {
  .List li a Span {
    Transform: Translatey (100px);
    transition: 0,2 s;
  }
  .List: Hover Span {
    Transform: Translatey (0);
  }
  .List li: nth-child (1) Span {
    TRANSITION-DELAY: 0S;
  }
  .List li: nth-child (2) Span {
    TRANSITION DU TRANSITION: 0,05S;
  }
  .List li: nth-child (3) Span {
    TRANSITION DU TRANSITION: 0,1 s;
  }
  .List li: nth-child (4) Span {
    TRANSITION DU TRANSITION: 0,15S;
  }
  .List li: nth-child (5) Span {
    TRANSITION DU TRANSITION: 0,2 S;
  }
  .List li: nth-child (6) Span {
    TRANSITION DU TRANSITION: 0,25S;
  }
}

Pour un contrôle plus flexible de la latence, vous pouvez utiliser CSS pour personnaliser les propriétés:

 @media (Hover: Hover) {
  .liste {
    --retard: 0,05s;
  }
  .List li a Span {
    Transform: Translatey (100px);
    transition: 0,2 s;
  }
  .List: Hover Span {
    Transform: Translatey (0);
  }
  .List li: nth-child (n) span {
    transition-retard: calc (var (- retard) * (n - 1));
  }
}

Cette méthode utilise la fonction calc() pour calculer dynamiquement le temps de retard, ce qui rend le code plus simple et plus facile à évoluer. n représente le numéro de séquence de l'élément de liste.

Si les éléments de la liste sont grands, les méthodes ci-dessus peuvent sembler redondantes. Vous pouvez utiliser Sass Loop pour générer du code:

 @media (Hover: Hover) {
  .List li a Span {
    Transform: Translatey (100px);
    transition: 0,2 s;
  }
  .List: Hover Span {
    Transform: Translatey (0);
  }
  @for $ i de 0 à 20 {
    .List li: nth-child (https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b {$ i 1}) span {
      Relay de transition: 0,05S * $ i;
    }
  }
}

Ce code SASS boucle pour générer des attributs transition-delay de 21 éléments de liste. Même s'il y a moins de 21 éléments de liste, l'excès de code sera effectivement réduit après la compression GZIP.

Enfin, vous pouvez également transmettre la valeur de retard de HTML:

• Ce
• Petit

@media (Hover: Hover) {
  .List li a Span {
    Transform: Translatey (100px);
    transition: 0,2 s;
  }
  .List: Hover Span {
    Transform: Translatey (0);
    TRANSITION-DELAY: var (- retard); / * Obtenez la valeur de retard de html * /
  }
}

La méthode à choisir dépend des besoins spécifiques du projet et des préférences personnelles. La méthode de boucle SASS présente des avantages dans la maintenabilité et l'évolutivité, tandis que la méthode d'attribut personnalisée est plus concise et flexible. Il est également pratique de définir directement HTML, mais peut ne pas être très pratique pour la maintenance.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!