Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
2294 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS: récupérer la position courante d'une animation pour l'inverser ?

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

CSS: récupérer la position courante d'une animation pour l'inverser ?

n°2351497
Alexandre-​Benoit B
Posté le 11-04-2020 à 10:18:23  profilanswer
 

Bonjour !
 
J'ai une petite jauge en SVG et CSS qui se "remplit" avec une animation sur 5 secondes. J'aimerais qu'en cas d'annulation de la part de l'utilisateur, cette jauge se "vide" mais à partir de la position courante et non de la position finale de la jauge. Je ne sais pas comment m'y prendre...
 
Vous auriez une idée ? Merci !

mood
Publicité
Posté le 11-04-2020 à 10:18:23  profilanswer
 

n°2351661
SICKofitAL​L
Razoreater
Posté le 14-04-2020 à 10:43:41  profilanswer
 

ca peut aider : https://css-tricks.com/controlling- [...] avascript/


---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°2351688
MaybeEijOr​Not
but someone at least
Posté le 14-04-2020 à 16:23:31  profilanswer
 

Pas évident, faut créer deux animations, une dans le sens aller et l'autre dans le sens retour. En effet, le changement de sens ne peut se faire qu'au niveau d'une keyframe, or nous n'en avons que 2 (début et fin) donc on ne peut pas utiliser toute la puissance des animations CSS.
Pour le sens retour, il faut définir une keyframe de largeur de départ qui correspond à la largeur finale d'où aura été stoppée l'animation dans le sens aller. Pour cela il faut utiliser une variable css qu'on vient modifier quand on stoppe la progression de la barre (sens aller) en lui donnant la valeur de la largeur que mesure l'élément à ce moment là.
Il ne reste plus qu'à alors attribuer la nouvelle animation au lieu de l'ancienne.

 

https://codepen.io/Perrier_ChouFleur/pen/qBOOPPK


Message édité par MaybeEijOrNot le 14-04-2020 à 16:26:03

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2351734
Alexandre-​Benoit B
Posté le 15-04-2020 à 00:59:07  profilanswer
 

Merci de vos réponses !
 
J'étais également arrivé à la conclusion qu'il me fallait 2 anims et une variable mais chez moi, les variables ne passaient pas : le code de Eij est astucieux mais je ne peux pas utiliser width car ma jauge est un arc de cercle SVG (*) et pour tout dire, j'étais arrivé à la conclusion que je n'avais pas accès aux variables dans les keyframes... C'est peut-être mon code qui est en cause (le SVG est décrit dans le HTML mais avec des defs de CSS). Je vais élaguer un peu et reprendre tout ça. Merci encore,
 

Spoiler :

(*) c'est pas de la perversion, hein, c'est une série de boutons pour un wake-on-lan et pour éviter les démarrages intempestifs, il faut maintenir le bouton pressé quelques secondes, ce qui dessine un logo on-off...

n°2351799
MaybeEijOr​Not
but someone at least
Posté le 15-04-2020 à 18:52:17  profilanswer
 

Comment elle fonctionne ta jauge ?


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2351896
Alexandre-​Benoit B
Posté le 17-04-2020 à 03:13:00  profilanswer
 

https://jsfiddle.net/ABB_2020/4oceu5w8/1/
 
Désolé du temps mis à te répondre, j'étais parti sur d'autres trucs et je n'ai plus la version à l'origine de la question...

n°2351944
MaybeEijOr​Not
but someone at least
Posté le 17-04-2020 à 15:51:42  profilanswer
 

Une solution consiste à faire deux animations en même temps, une sur ton bouton, et une autre cachée qui va servir à faire les mesures : https://jsfiddle.net/ty6281dw/
Les deux animations doivent être calibrées de la même manière, simplement, celle qui est cachée va faire évoluer des propriétés qu'on peut observer (ici la largeur d'un élément caché et ne pas oublier le temps écoulé qui peut être calculé par rapport à cette largeur).
Quand on arrête l'animation on peut ainsi récupérer les valeurs qu'on passe au CSS par JS via les variables CSS, on peut ainsi relancer une autre animation à partir du point d'arrêt.


Message édité par MaybeEijOrNot le 17-04-2020 à 15:52:17

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2351978
Alexandre-​Benoit B
Posté le 17-04-2020 à 23:12:11  profilanswer
 

Brillant, le coup de l'anim cachée, bravo ! Et merci !
T'as carrément gagné ta binouze, là...

n°2351984
MaybeEijOr​Not
but someone at least
Posté le 18-04-2020 à 01:16:39  profilanswer
 

Tu peux faire sans je pense, en mesurant le temps que dure tes animations, mais le fait d'ajouter une animation cachée permet d'avoir une plus grande portée et une accessibilité plus simple.
 
Bon après il reste peut-être pas mal de travail pour tout synchroniser avec ce que tu veux faire mais tu as une bonne base je pense maintenant.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS: récupérer la position courante d'une animation pour l'inverser ?

 

Sujets relatifs
[FullCalendar] - Récupérer l'attribut className d'un élément mis en bginterface utilisateur modifiant contenu HTML et CSS
CSS - Retour en haut de colonneGrid CSS
Récupérer automatiquement des listes de produits de Amazon.frInverser l'écran afin de le voir dans un miroir de salle de bain
Récupérer des infos d'un site toutes les heuresRecupérer données d'un site web
[PYTHON] Récupérer les donnée d'un programme 
Plus de sujets relatifs à : CSS: récupérer la position courante d'une animation pour l'inverser ?


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR