如何解决带有CSS3问题的JavaScript调整大小
| 我正在编写Firefox扩展程序,其功能之一是能够在界面中添加额外的“行”图标。我正在使用CSS和JavaScript进行组合,但是我\如果我过快地单击\“展开\”或\“合同\”按钮,这会产生一个奇怪的问题,该按钮会在高度上随机添加一定数量的像素。我认为是因为从css获取高度,并且在过渡时,它具有“增长中”的高度,因此它使用错误的高度执行JS方程。 CSS:#wrapper {
background: rgba(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处理程序,然后在触发“ 3”时重新启用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。