div 높이에 애니메이션 효과를 적용 할 수있는 간단한 자바 스크립트?

Question

자바 스크립트에서 Div 높이를 애니메이션화하기위한 Jquery의 대안이 있습니까? Jquery는 훌륭하고 상대적으로 작지만,이 기능 중 하나만을 위해 jquery 전체를로드하려고하지 않습니다. 그리고 이것이 WebOs 앱 (웹 앱이 아님)을 고려할 때, 로딩 시간을 가능한 한 작게 유지해야합니다.

감사

Answer 1

function animateHeight(obj, height){ 

    var obj_height = obj.clientHeight; 

    if(obj_height <= height){ return; } 
    else { 
     obj.style.height = (obj_height - 5) + "px"; 
     setTimeout(function(){ 
      animateHeight(obj, height); 
     }, 500) 
    } 
} 

멋진 바이올린 : http://jsfiddle.net/maniator/Z6cbq/

Answer 2

웹 OS 모바일 웹킷을 사용하기 때문에 당신이 CSS와 함께 대부분의 작업을 할 수있는 그런 다음 자바 스크립트 쉽게 정말

#someElement { 
    -webkit-transition: height 100ms linear; 
    height: 0; 
} 

를 :

document.querySelector('#someElement').style.height = '100px' 
// - or - 
document.querySelector('#someElement').className += ' open'; 
// where #someElement.open has a defined height. 

는 여기에 몇 가지 세부 사항을이다 : http://pre101.com/blog/2009/11/10/a-guide-to-css-transitions-in-webos/

Answer 3

1 KB에 무게 베어 뼈 애니메이션 라이브러리 :

https://github.com/relay/anim/