[英]JavaScript Resize w/ CSS3 Issue
I'm writing a Firefox extension, and one of the features is to be able to add an extra "row' of icons in the interface. I'm doing this using a combination of CSS and JavaScript, but I'm getting a weird issue if I click too quickly on the "expand" or "contract" button, where it's adding a random amount of pixels to the height. I think it's because it's getting the height from the css, and while it's transitioning, it has a "growing" height, so it does the JS equation with the wrong height. 我正在编写Firefox扩展,其功能之一是能够在界面中添加额外的“行”图标。我使用CSS和JavaScript的组合来完成此操作,但我感到很奇怪如果我过快地单击“展开”或“合同”按钮,就会在高度上随机添加像素,这是问题。我认为这是因为它是从CSS获取高度,并且在过渡时,它具有“高度”,因此JS方程的高度错误。
CSS: 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: 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: HTML:
<div id="wrapper">
<a onclick="expand()">Exand Div</a> - <a onclick="contract()">Contract Div</a><br />
<span id="print">height: 100px</span>
</div>
The transitionend event could be the solution here. Transitionend事件可能是此处的解决方案。
Just disable your onclick handlers once clicked, then re-enable when the transitionend
fires. 只需在单击后禁用onclick处理程序,然后在transitionend
触发时重新启用即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.