JavaScript调整大小w/CSS3问题

我正在编写一个Firefox扩展，其中一个功能是能够在界面中添加额外的“一行”图标。我使用CSS和JavaScript的组合来实现这一点，但是如果我点击“扩展”或“合同”太快，我会遇到一个奇怪的问题“按钮，向高度添加随机数量的像素。我认为这是因为它从css中获得了高度，而当它转换时，它有一个“增长”的高度，所以它用错误的高度做JS方程

CSS:

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
            }
        }

函数展开（）{
var orig=document.getElementById（“包装器”）.clientHeight；
如果（原始值<300）{
var变化=原始值+100；
document.getElementById（“包装器”）.style.height=已更改；
//调试
document.getElementById（“print”）.innerHTML=“高度：”+changed+“px”；
//结束调试
}否则{
//无所事事
}
}
职能合同（）{
var orig=document.getElementById（“包装器”）.clientHeight；
如果（原始值>100）{
var变化=原始值-100；
document.getElementById（“包装器”）.style.height=已更改；
//调试
document.getElementById（“print”）.innerHTML=“高度：”+changed+“px”；
//结束调试
}否则{
//无所事事
}
}

HTML:

Exand部门-合同部门

高度：100px

此事件可能就是解决方案

---

单击后只需禁用onclick处理程序，然后在触发

transitionend

时重新启用

你能详细解释一下这个奇怪的问题是什么吗？啊，对不起，我以为我编辑了它，一定没有点击保存…要让它工作，你必须使用什么版本的Firefox？我看没什么问题。。。或者任何“转换”。介意给我一个代码片段看看吗？我对JS是个新手；

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
            }
        }

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