Transition sur largeur à l'ouverture du menu

barpoi78
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

/Pour le sous-menu du menu design/
function afficheSousMenu(){
sousMenu = document.getElementById('sousMenu');

if (sousMenu.style.display == 'none' ||  sousMenu.style.display == '') {
    sousMenu.style.display = 'block';
    sous_menu.style.transition = "width";
    sous_menu.style.transitionDuration = "2s";
}
else {
    sousMenu.style.display = 'none';
}

}

Mon menu s'affiche bien mais aucune transition ne se fait.

Je vous remerci de votre aide.

8 réponses

Benjamin Derepas

Je crois qu'en modifiant le style du dom en js natif, aucune animation n'est présente.
Tu peux sois utiliser jQuery (toggleSlide etc) qui propose pas mal de fonction d'affichage/cacher avec un param d'animation, sois regarder du coté du setTimeOut.

betaWeb

Salut,

Pourquoi utiliser du JS pour faire cela ? Une transition CSS suffit amplement ;)

barpoi78
Auteur

Oui mais le problème c'est que je ne souhaite pas la faire au survol mais au clic.

LeBoulet

Salut,

Je pense que ça vient du fait que ta variable sousMenu change de nom d'une ligne à une autre :

ligne 2 : sousMenu.style.display

ligne 3 : sous_menu.style.transition

Maenhyr

dans ces cas la, tu geres l'animation en css dans une classe et tu l'ajoutes/supprimes au clic.

Benjamin Derepas

Faire les animation/transitions au CSS permet d'utiliser moins de ressource et donc donne un résultat plus fluide.
Bon ici tu veux juste changer le display au click.
Tu peux très bien le faire en CSS avec le selecteur :target .
J'ai codé un petit truc la dernière fois, assez similaire à ce que tu cherches, dans la logique. Regarde ce codepen .

betaWeb

Au clic ou au survol, là n'est pas la question. Il suffit d'ajouter / supprimer une classe CSS qui se chargera de rendre l'élément visible.

barpoi78
Auteur

J'arrive bien à faire une transition en css au survol mais ce que je souhaite faire, c'est animer mon menu burger. Quand je clique sur une icône + j'ouvre mon menu et avec addEventListener et innerHtml mon icône devient une icône - . Alors quand je clique sur + j'aimerais que mon sous-menu s'affiche avec une transition sur la hauteur.