JavaScript Resize w/CSS3問題

我正在編寫一個Firefox擴展，其中一個功能是能夠在界面中添加額外的「行」圖標，我正在使用CSS和JavaScript，但是如果我點擊「展開」或「合約」按鈕的時候速度過快，我會得到一個奇怪的問題，它會在高度上添加隨機數量的像素，我認爲這是因爲它從CSS獲得高度，雖然它的轉換，它有一個「成長」的高度，所以它用錯誤的高度JS方程JavaScript Resize w/CSS3問題

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>

來源

2011-04-14 JacobTheDev

你能詳細說一下這個奇怪的問題是什麼嗎？ – Jacob 2011-04-14 01:14:45

ahh對不起，我想編輯它，一定沒有點擊保存... – JacobTheDev 2011-04-14 01:20:10

什麼版本的Firefox不得不使用這個工作？我沒有看到任何問題......或任何「過渡」。 – 2011-04-14 01:59:22

的transitionend事件可以是這裏的解決方案。

只需點擊一次就禁用您的onclick處理程序，然後在transitionend觸發時重新啓用。

來源

2011-04-14 02:10:42 codelahoma

介意給我一個代碼片段來看看？我很新的JS ^^; – JacobTheDev 2011-04-14 16:14:26

JavaScript Resize w/CSS3問題

回答

相關問題