Barres de minuterie dans CSS avec des propriétés personnalisées

Récemment, j'ai besoin de mettre en œuvre un minuteur visible dans le projet, et il y a déjà une conception d'interface utilisateur similaire dans le projet en tant que référence. Les utilisateurs n'ont pas besoin de voir le nombre diminuer, mais veulent plutôt voir une «barre» diminuer progressivement du complet au vide. J'ai mentionné cela car il existe de nombreuses façons d'implémenter l'interface utilisateur "temporisateur". Cet article ne concerne pas toutes ces méthodes (les résultats de recherche sur Codepen seraient plus utiles), mais plutôt celui qui fonctionne très bien pour moi.

Le type de minuterie dont j'ai besoin est ce qu'on appelle la barre "Tirl Time" dans le projet. La réalisation d'une action peut déclencher un temps de virage, et la plupart des actions suivantes seront bloquées jusqu'à la fin du temps de virage. Par conséquent, une minuterie claire de la barre rouge est le bon choix d'interface utilisateur. Cela donne aux gens un sentiment de rythme et de flux, vous pouvez "ressentir" l'heure de fin de la minuterie et planifier votre prochaine opération.

La définition de cette minuterie est assez facile ...

Créons une structure d'élément parent / enfant au cas où nous devons coiffer les parties vides du conteneur à l'avenir.

<div>
  <div></div>
</div>

Maintenant, nous ne faisons que les bars intérieurs.

 .
  hauteur: 5px;
  CONTEXTE: GRADIÉ LINÉAIRE (en bas, rouge, # 900);
}

Cela nous donne une belle barre rouge qui peut être utilisée comme indicateur de temps.

Ensuite, nous devons le laisser compter, mais ici, nous devons considérer les fonctionnalités. Une telle minuterie a besoin de savoir combien de temps il faut! Nous pouvons fournir ces informations directement dans HTML. Cela ne signifie pas que nous évitons d'utiliser JavaScript - nous l' embrassons . Nous disons: "Hé, javascript, s'il vous plaît, donnez-nous une variable de durée et nous gérerons le reste."

<div style="--duration: 5;">
  <div></div>
</div>

En fait, cette approche est très adaptée au JavaScript de la manipulation de DOM moderne. Tant que --variable est correct, il peut renvoyer l'élément DOM à tout moment, et nous pouvons nous assurer que la conception gère bien cette situation. Nous ferons une variation comme celle-ci.

Maintenant, commençons l'animation. La bonne nouvelle est que c'est simple. Il s'agit d'une image clé à ligne unique:

 @KeyFrames Roundtime {
  à {
    / * Plus efficace que l'animation `width` * /
    transformée: scalex (0);
  }
}

Nous pouvons "compresser" la barre car le style de la barre n'a pas l'air comprimé lorsque nous évoluons horizontalement. Si nous faisons cela, nous pouvons animer la largeur. Ce n'est pas un gros problème, d'autant plus qu'il ne réajuste pas la disposition de rien d'autre.

Maintenant, nous l'appliquons au bar:

 .
  / * ... * /
  Animation: les étapes de calcul (var (- durée) * 1s) (var (- durée)) en avant;
  Transform-Origin: Centre gauche;
}

Voyez comment nous utilisons la variable --duration pour définir la durée de l'animation? Cela accomplit la plupart du travail. Je l'utilise également pour définir le même nombre d' steps() afin qu'il diminue "Grid by Grid". "Bid-by-Frame" peut être un effet d'interface utilisateur visuel que vous aimez (j'aime), mais il s'adapte également à l'idée que JavaScript peut renvoyer cette barre à tout moment, et Bid-by-Frame le fait peu de choses. J'ai utilisé un entier comme valeur de durée afin qu'il puisse tous deux l'utiliser comme celui-ci.

Cependant, si vous voulez une animation fluide, nous pouvons le faire, par exemple:

<div ...="" data-style="smooth"></div>

Alors n'utilisez pas steps :

 .Round-Time-Bar [Data-Style = "Smooth"] Div {
  Animation: Ronds-Time Calc (var (- Durée) * 1S) Formeaux linéaires;
}

Notez que nous utilisons également des animations linéaires, ce qui semble logique pour la minuterie. Le temps, comme celui-ci, ne se souciera pas. Ou le fera-t-il? Quoi qu'il en soit, c'est votre choix. Si vous voulez une minuterie qui ressemble à une accélération ou à une décélération à certains moments, allez-y.

Nous pouvons utiliser la même API basée sur data-attribute pour implémenter les changements de couleur:

 .Round-temps-bar [data-color = "blue"] div {
  Contexte: Linear-Gradient (en bas, # 64B5F6, # 1565C0);
}

La dernière variante consiste à fixer la largeur de chaque "seconde". De cette façon, une minuterie de 10 secondes sera plus longue qu'une minuterie de 5 secondes:

 .Round-time-bar [data-syle = "fixe"] div {
  Largeur: calc (var (- durée) * 5%);
}

Voici une démonstration:

Faites attention aux conseils pour redémarrer les animations CSS.

Oh, au fait, je sais qu'il y en a un<meter></meter> Élément, il peut être plus sémantique, mais sa propre interface utilisateur ne peut pas être animée comme je veux ici - du moins ne pas la combattre. Mais je ne sais pas si c'est plus accessible? Déclate-t-il sa valeur actuelle de manière utile? Si nous utilisons JavaScript pour mettre à jour en temps réel<meter></meter> , serait-ce une minuterie plus accessible? Si quelqu'un le sait, je peux lier une solution ici.

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!