11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Animation d'un panneau ouvert par défaut (pour un menu accord

Bonsoir. Dans la suite d'un topic précédent je mets à jour un menu accordéon en javascript. J'en suis à l'implémentation d'un menu déjà ouvert par défaut, ça fonctionne : CodePen.

Par contre la fermeture de ce menu ouvert par défaut ne bénéficie pas de l'animation de transition lors de sa première fermeture. Je n'arrive pas à voir ce qui me manque, ce que je pourrais changer pour y parvenir. A force d'avoir le nez sur le code...
Modifié par Olivier C (17 Jun 2020 - 20:38)
Ouap c'est bon ! (il suffit que je pose la question pour y arriver).

Sur la valeur max-height de mon panneau, à la place de 'inherit' (tout à fait valable pour la hauteur) il fallait que je mette plutôt une valeur en pixels :
wrapper.children[1].style.maxHeight = wrapper.children[1].scrollHeight + 'px';
En fait il fallait les deux !

'inherit' évite le lancement de l'animation au chargement de la page - l'effet d'ouverture du panneau - il est donc nécessaire. La valeur doit cependant être passée en pixels pour le calcul de l'animation, elle est calculée ici avec '.scrollHeight' :
    if (wrapper.classList.contains('open')) {
      const wrapperContent = wrapper.children[1];
      wrapperContent.style.maxHeight = 'inherit';
      wrapperContent.style.maxHeight = wrapperContent.scrollHeight + 'px';
    }

Modifié par Olivier C (18 Jun 2020 - 16:20)
Meilleure solution
Pour être honnête j'ai pas tout comprit mais si ton deuxieme poste est relatif à un problème d'animation au chargement de la page, j'ai rencontré le même problème sur Chrome et il m'avais suffit de rajouter ça au début de mon html : 


<script> </script> <!-- ( il faut qu'il y est un espace entre les deux balises ) -->
Non non : il s'agissait de mettre au point une initialisation de l'animation. De toute façon le script est appelé à partir d'un fichier regroupant toutes les fonctions.
Sujet clos
Aller à