JavaScript Redimensionner avec CSS3 Édition

Question

J'écris une extension Firefox, et l'une des fonctionnalités est d'être en mesure d'ajouter une "rangée" supplémentaire d'icônes dans l'interface.Je fais cela en utilisant une combinaison de CSS et JavaScript, mais je reçois un problème bizarre si je clique trop rapidement sur le bouton "expand" ou "contract", où il ajoute une quantité aléatoire de pixels à la hauteur, je pense que c'est parce que ça prend la hauteur du css, et alors qu'il est la transition, il a une hauteur "croissance", il fait l'équation JS avec la mauvaise hauteur

CSS.

#wrapper { 
    background: rgba(0,0,0,.85); 
    box-shadow: 0px 0px 5px #000; 
    color: #fff; 
    height: 100px; 
    width: 250px; 
      -moz-transition: height 1s; 
} 

JavaScript:

function expand() { 
      var orig = document.getElementById("wrapper").clientHeight; 
      if (orig < 300) { 
       var changed = orig + 100; 
       document.getElementById("wrapper").style.height=changed; 
       // debug 
       document.getElementById("print").innerHTML="height: " + changed + "px"; 
       // end debug 
      } else { 
       // do nothing 
      } 
     } 
     function contract() { 
      var orig = document.getElementById("wrapper").clientHeight; 
      if (orig > 100) { 
       var changed = orig - 100; 
       document.getElementById("wrapper").style.height=changed; 
       // debug 
       document.getElementById("print").innerHTML="height: " + changed + "px"; 
       // end debug 
      } else { 
       // do nothing 
      } 
     } 

HTML:

<div id="wrapper"> 
    <a onclick="expand()">Exand Div</a> - <a onclick="contract()">Contract Div</a><br /> 
    <span id="print">height: 100px</span> 
</div> 

Answer 1

L'événement transitionend pourrait être la solution ici.

Désactivez simplement vos gestionnaires onclick une fois cliqués, puis réactivez-les lorsque le transitionend se déclenche.