我正在编写一个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>
transtionend事件可能是这里的解决方案。
只要禁用onclick处理程序一旦点击,然后重新启用时,transitionend
火灾。