11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Animation d'un menu

Bonjour,

Je travaille actuellement sur un menu. Le problème est que lorsque que je clique plusieurs fois, il s'anime plusieurs fois. Y-a-t-il une façon de faire en sorte qu'il s'anime qu'une seule fois? Je connais la méthode 'stop()' de jQuery mais en Vanilla JS, je connais pas d'équivalent. J'ai essayé de jouer avec les classes et les booléens mais en vain.

Si quelqu'un peut m'aider Smiley cligne

Voila mon menu:
https://jsfiddle.net/org031nu/1/
Tu pourrais ajouter une classe d'état qui s'ajoute à l'animation et qui se retire à la fin, avec une condition qui fait que, quand la classe est présente, tu ne puisses pas faire jouer l'anim'. Il y a certainement mieux à faire...

PS : en aparté, pour des raisons d'optimisation on peut réécrire la boucle for() comme ceci :
for(var i = 0, len = menuItems.length; i < len; i++)

Modifié par Olivier C (20 Feb 2017 - 16:57)
@Olivier C,

Je vais essayer en utilisant un classe.

Ca veut dire quoi exactement:
"Il y a certainement mieux à faire..."
On peut aussi utiliser removeEventListener dans la fonction qui est passée à addEventListener, elle va enlever l'événement déclencheur. À utiliser avec les mêmes arguments.

Smiley smile
Modérateur
yep, j'ai aussi pensé à cette éventualité, mais question de performances, se servir d'un booléen est plus clean que d'attacher/désattacher des écouteurs d'évènements.

Pour les cas plus complexes de toute façon il faudra utiliser ou créer un objet qui gère les choses plus proprement (méthodes stop, reset, etc,)
@kustolovic, @Zelena,

Merci pour vos contributions.

Je choisis la solution apportée par @kustolovic. C'est exactement ce que je cherchais à accomplir. J'avais essayé pas mal de choses avec une variable booléenne mais j'ai encore du mal avec JS. Merci pour la réponse claire Smiley smile !
Modifié par allan00958 (20 Feb 2017 - 18:07)
allan00958 a écrit :
Ca veut dire quoi exactement:
"Il y a certainement mieux à faire..."

Ça veut dire qu'il y avait certainement une meilleure solution... à la Kustolnovic par exemple qui est nettement mieux :
if (isAnimated) return;

Pourquoi j'ai proposé plus haut la solution d'une classe css plutôt que d'une variable js ? Je ne sais pas... Décidément j'ai la tête ailleurs en ce moment.
Sujet clos
Aller à