JavaScript调整大小w/ CSS3问题

JavaScript Resize w/ CSS3 Issue

本文关键字：CSS3 问题 调整 JavaScript      更新时间：2023-09-26

我正在编写一个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火灾。

相关文章：