Animation si contenu change

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

Et l'eau,

Bravo pour ton anim. 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
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

Superbe en effet,

transition fonctionne aussi https://codepen.io/gc-nomade/pen/QWjgxVK ( et je me suis permis de changer quelques valeur en vw et em au lieu de pixels ).
Modifié par gcyrillus (28 Apr 2020 - 16:52)

Hello gcyrillus,

Ah oui je vois, c'est vrai que je n'y pense jamais, je pense toujours "keyframes"
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
Modifié par stryk (28 Apr 2020 - 17:35)

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

De rien , 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

Hello,

Ah oui en effet, mieux