Différentes approches pour créer une animation échelonnée

L'animation de base est simple: définissez les images clés, noms des animations et appliquez-les aux éléments. Mais parfois, des techniques plus complexes sont nécessaires pour réaliser l'effet d'animation idéal. Par exemple, un égaliseur sonore peut utiliser la même animation pour chaque barre, mais ils sont entrelacés pour créer l'illusion d'animations indépendantes.

Récemment, lors de la construction d'un tableau de bord, je veux que les éléments de l'un des widgets soient affichés dans une animation entrelacée.

Comme l'égaliseur sonore ci-dessus, j'ai commencé à utiliser le sélecteur :nth-child . J'utilise une liste non ordonnée (<ul></ul> ) En tant que conteneur parent, donnez-lui une classe et utilisez le pseudo-selector :nth-child pour compenser l'animation de chaque élément de liste par animation-delay .

 .my-list li {
  Animation: My-Animation 300 ms Emplacable-out;
}

.my-list li: nth-child (1) {
  Animation-retard: 100 ms;
}

.my-list li: nth-child (2) {
  Animation-retard: 200 ms;
}

.my-list li: nth-child (3) {
  Animation-retard: 300 ms;
}

/* et ainsi de suite*/

Cette technique tient très bien les articles, surtout si vous savez combien d'éléments figurent dans la liste à tout moment. Cependant, cette approche échoue lorsque le nombre d'articles est imprévisible (c'est le cas avec les widgets que j'ai construits pour le tableau de bord). Je ne veux vraiment pas revenir à ce code chaque fois que le nombre d'éléments dans la liste change, j'ai donc écrit une boucle SASS rapide qui peut gérer jusqu'à 50 éléments et ajouter de la latence d'animation à mesure que chaque élément augmente:

 .my-list {
  li {
    Animation: My-Animation 300 ms Emplacable-out;

    @for $ i de 1 à 50 {
      &: nth-child (# {$ i}) {
        Animation-retard: 100ms * $ i;
      }
    }
  }
}

Cela devrait résoudre le problème! Cependant, cela semble trop maladroit. Bien sûr, cela n'ajoutera pas trop de poids au fichier, mais vous savez que CSS compilé contiendra de nombreux sélecteurs inutilisés, tels que nth-child(45) .

Il doit y avoir une meilleure façon. Habituellement, je me tournais vers JavaScript pour trouver tous les projets et ajouter des retards, mais… cette fois, j'ai passé un peu de temps à explorer si cela pouvait être fait seul avec CSS.

Et les compteurs CSS?

La première chose qui me vient à l'esprit est d'utiliser un compteur CSS avec la fonction calc() :

 .my-list {
  Counter-Ressest: My-Counter;
}

.my-list li {
  Counter-Increment: My-Counter;
  Animation-délay: calc (compteur (my-comptor) * 100ms);
}

Malheureusement, cela ne fonctionne pas, car la spécification indique que le compteur ne peut pas être utilisé dans calc() :

Le composant de calc() peut être une valeur littérale ou attr() ou calc() .

Il s'avère que certaines personnes aiment l'idée, mais ce n'est pas encore hors de la scène du projet.

Et les attributs de données?

Après avoir lu l'extrait à partir de la spécification, j'ai appris que calc() peut utiliser attr() . Et, selon la valeur CSS et les spécifications de l'unité:

Dans CSS3, l'expression attr() peut renvoyer de nombreux types de valeurs différents

Cela me rappelle; Peut-être que les attributs de données peuvent résoudre le problème.

• Article 1
• Article 2
• Article 3
• Article 4

.my-list li {
  Animation-délay: calc (att (data-compty) * 150ms);
}

Mais mes espoirs sont anéantis parce que ce support de navigateur est très mauvais!

Ce navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité dans cette version et plus tard.

bureau

PC mobile / tablette

Donc, revenons à la planche à dessin.

Et les propriétés personnalisées?

Ma prochaine idée est d'utiliser CSS pour personnaliser les propriétés. Ce n'est pas joli, mais ça marche?

Il s'avère qu'il est également flexible. Par exemple, les animations peuvent être inversées:

Il peut également faire quelque chose de complètement aléatoire et animer des éléments en même temps:

Nous pouvons même aller plus loin et faire un swing diagonal:

Le support du navigateur n'est pas si mal ( pop-up Internet Explorer ).

Ce navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité dans cette version et plus tard.

bureau

PC mobile / tablette

Une grande caractéristique de CSS est qu'elle ignore les choses qu'il ne comprend pas, grâce à la cascade. Cela signifie que tout sera animé dans la vue ensemble. Si ce n'est pas votre style, vous pouvez ajouter une requête de fonctionnalité pour remplacer l'animation par défaut:

 .my-list li {
  Animation: animation de secours;
}

@Supports (--variables) {
  .my-list li {
    Animation: animation de fantaisie;
    Animation-retard: calc (var (- commande d'animation) * 100ms);
  }
}

CSS natif est longue en vie

Plus je m'arrêtais pour me demander si j'avais besoin de JavaScript, plus j'étais surpris de ce que CSS lui-même pouvait faire. Bien sûr, si le compteur CSS peut être utilisé dans la fonction calc() , ce serait une solution très élégante. Mais pour l'instant, les propriétés personnalisées en ligne offrent un moyen puissant et flexible de résoudre ce problème.

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!