JavaScript CSS3로 크기 조정 문제

저는 Firefox 확장 프로그램을 작성 중이며 인터페이스의 추가 "행"아이콘을 추가 할 수있는 기능 중 하나입니다. CSS와 JavaScript, 높이에 픽셀의 무작위 금액을 추가하는 "확장"또는 "계약"단추를 너무 빨리 클릭하면 이상한 문제가 발생합니다. CSS에서 높이가 올라가고 있기 때문에, 이 전환 것 동안, 그것은 "성장"높이가, 그래서 그것은 잘못된 높이와 JS 방정식을 수행JavaScript 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; 
}

자바 스크립트 :

012 3,516,

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

아, 미안해 편집 해 뒀어. 절대로 클릭하지 마라. – JacobTheDev

이 기능을 사용하려면 어떤 버전의 Firefox가 필요합니까? 나는 어떤 문제도 보지 않는다 ... 또는 어떤 '전환'도. –

transitionend 이벤트는 여기 해결책이 될 수 있습니다.

클릭 한 번만 onclick 처리기를 비활성화 한 다음 transitionend이 실행되면 다시 활성화하십시오.

출처

2011-04-14 02:10:42 codelahoma

보기에 코드 스 니펫을 제공하는 마음입니까? 나는 꽤 새로운 JS ^^; – JacobTheDev

JavaScript CSS3로 크기 조정 문제

답변

관련 문제