27864 sujets

CSS et mise en forme, CSS3

Hello la team,

Bon j'ai bricolé une horloge pour l'exemple.
Donc en gros c'est JS qui applique une class selon si le contenu du <span> change.
Pour résumer, je fais un rotateY de 90deg pour masquer le chiffre, ensuite je change le chiffre, puis je refais un rotateY pour faire apparaitre le nouveau chiffre.
Le code est moche hein, c'est un exemple ...

Je me demandais si on pouvait faire ce genre de choses uniquement en CSS, ou avec un minimum de JS, si il existe une sorte de "onchange" pour le contenu d'un élément.

Si quelqu'un a une idée pour optimiser ce genre de choses je suis tout ouïe !

https://codepen.io/exemple/pen/xxwrKYJ
Modérateur
Et l'eau,

Bravo pour ton anim. Smiley smile Bonne idée pour ton effet. Pour répondre à ta question, tu ne pourras pas le faire full css (quel date ? quelle heure ?)
Salut,

Merci Smiley biggrin
En fait je pensais changer les valeurs en JS et pouvoir détecter ce changement avec CSS.
J'avoue que de devoir appliquer des class en jouant sur des tempo et faire coïncider ça avec les tempo d'animation css c'est pas super pratique.
J'imaginais bien quelque chose de ce style:

.flip:changeContent { }

ça serait plus fun Smiley langue
Hello gcyrillus,

Ah oui je vois, c'est vrai que je n'y pense jamais, je pense toujours "keyframes" Smiley lol
Tu as super bien fait pour les "em, vw etc" c'est sur que ça change la vie, j'avoue que je suis une quiche en responsive ^
Alors sinon dans ton lien tu as fais un copier/coller du CSS du coup y'a 2X des class et ID, je pense avoir fait le ménage mais y'a toujours un petit repositionnement léger quand un chiffre vient de "tourner". ( le chiffre se place et rebouge un poil de mil )
Je n'arrive pas à voir à quoi c'est dû.

edit: j'avais même pas dit merci Smiley cligne
Modifié par stryk (28 Apr 2020 - 17:35)
Modérateur
stryk a écrit :
Hello gcyrillus,
...., je pense avoir fait le ménage mais y'a toujours un petit repositionnement léger quand un chiffre vient de "tourner". ( le chiffre se place et rebouge un poil de mil )
Je n'arrive pas à voir à quoi c'est dû.

edit: j'avais même pas dit merci Smiley cligne


De rien Smiley cligne , je n'ai pas fais grand chose en fait.

pour le décalage voici la mise à jour :
span {
  transition:transform  0.3s;
  transform: rotateY(0deg);/* par défaut mais semble devoir être présent pour éviter l'effet de décalage */
}
.startAnim {
  transform: rotateY(90deg);
}
.endAnim {
  transform: rotateY(0deg);
}


Bonne continuation