[Résolu] Faire un équivalent show / hide Jquery avec JavaScript

Bonjour,

Je cherche à faire un équivalent show / hide Jquery mais en JavaScript.

En fait j'embarque un Jquery qui fait 80ko je crois juste pour me servir de ça et je trouve que ça ne vaut pas le coup.

J'ai essayé une première solution avec un display : none suivi d'un display : block. Ca fait bien un je te vois puis je te vois plus mais il n'y a aucune transition aucune fluidité.

Ensuite j'ai essayé une deuxième solution avec une transition sur du transform scale.
Ca marche mais au départ l'élément est dans le flux et il y reste. Je ne libère pas l'espace lorsque je fais l'équivalent du hide(). Je n'ai pas exactement l'équivalent du fonctionnement avec Jquery.
https://codepen.io/testeur_06/project/editor/XEbgyj

Je ne suis pas sûr d'avoir réussi à bien m'expliquer. Merci d'avance pour votre aide.

et l'eau,

transitionend

niuxe a écrit :
et l'eau,

transitionend

Merci pour le tuyau mais je ne vois pas ce que j'en fais de cet événement.
Si tu pouvais développer ça m'aiderait. Merci.

Bonjour,

Je ne suis pas sûr d'avoir compris la question.

S'il n'y a que du texte, tu peux faire la transition sur un font-size qui irait de 0 à ce que tu veux.

S'il y a un peu de tout, tu peux faire la transition sur le transform avec le scale allant de 0 à ce que tu veux, ET sur les dimensions de l'élément qui iraient de 0 à ce que tu veux.

Amicalement,

parsimonhi a écrit :
Je ne suis pas sûr d'avoir compris la question.

Idem, puisque scale 0 va obligatoirement laisser de la place. Cela dit, j'ai pas vérifié. Dans le doute, transitionend permet de faire un callback
Modifié par niuxe (30 Jan 2021 - 21:11)

Bonjour,

niuxe a écrit :
Idem, puisque scale(0) va obligatoirement laisser de la place.

En fait, la "place" réservée pour l'élément dans la page est par défaut la taille qu'il aurait avec scale(1), même si on met scale(0) initialement. Pour modifier ça, il faut jouer sur d'autres propriétés (ou peut-être bricoler avec le callback que tu proposes, mais ce n'est pas clair que ce soit nécessaire). En d'autres termes, le navigateur place les éléments sans le transform, puis applique le transform en ne modifiant que l'élément concerné sans toucher à la position des autres éléments.

EDIT: bon, après réflexion, je pense qu'utiliser scale() est probablement une mauvaise idée. On devrait pouvoir se débrouiller en faisant varier seulement font-size et en utilisant l'unité em pour toutes les dimensions concernées. À tester.

Amicalement,
Modifié par parsimonhi (30 Jan 2021 - 23:43)

Salut, salut

Merci pour vos réponses.

Alors j'ai essayé d'autres propriétés pour la transition (line-height, height, width + transform scale). Ca ne change rien au fait qu'à l'état initial la totalité de la place (de l'état final) est réservée dans le flux.

Si il n'y a que du texte ça marche avec le font-size. Ca déjà c'est bien .
C'est pas super fluide ça saccade un petit peu. Du coup j'ai mis 500ms sur la transition.
codepen

Mais comme je voudrais avoir quelque chose de général je suis allé voir le code JQuery. La fonction Show / Hide fait une 15ène de lignes. Elle fait appel à d'autres petites fonctions. Je vais plutôt essayer d'extraire la fonctionnalité pour me faire un truc perso léger qui fasse juste ça.

Merci pour votre aide.
Modifié par Dev-Web-06 (31 Jan 2021 - 09:26)