Transition sur UL

Version imprimable

Transition sur UL

Bonjour,

Je souhaite faire une transition à l'ouverture de mon sous-menu mais de cette façon (lignes 7 et 12) , cela ne fonctionne pas:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var sous_menu = document.getElementById('sub-nav-mobile');
var btn_sous_menu = document.getElementById("btn-sous-menu");
 
if (sous_menu.style.display == 'none' || sous_menu.style.display == '') {
    sous_menu.style.display = 'block';
    btn_sous_menu.innerHTML = "clear";
    sous_menu.style.transition = "transition-duration: 1s";
} else {
    sous_menu.style.display = 'none';
    btn_sous_menu.innerHTML = "add";
    sous_menu.style.transition = "transition-duration: 1s";
}
}
btn_sous_menu.addEventListener("click", sousMenu);

Je vous remercie de votre aide.

29/03/2016, 13h38
SylvainPV

Bonjour,

Appliquer en JavaScript la propriété de style transition ne sert à rien ici, vu qu'elle est fixe. Autant le faire directement en CSS. De plus, la ligne sous_menu.style.transition="transition-duration: 1s"; est de toute façon incorrecte car tu assignes non pas une valeur mais un couple propriété:valeur, ce qui n'a pas de sens ici vu que l'assignation détermine déjà la propriété.
01/04/2016, 17h47
barale61

Transition sur UL

Bonjour,

J'ai essayé au survol mais comment déclencher cette transition au click sur mon bouton ?