Блог

Я пишу расширение для Firefox, и одна из функций заключается в возможности добавления дополнительного «ряда» значков в интерфейсе. Я делаю это, используя комбинацию CSS и JavaScript, но у меня возникает странная проблема, если я слишком быстро нажимаю на кнопку «развернуть» или «заключить контракт», где добавляется случайное количество пикселей к высоте. Я думаю, это потому, что он получает высоту из css, и во время перехода он имеет «растущую» высоту, поэтому он выполняет уравнение JS с неправильной высотой.

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>
  

Событие transitionend может быть решением здесь.

Просто отключите обработчики onclick после нажатия, затем снова включите, когда transitionend сработает.