Легкий Javascript для анимации высоты div?

Question

Мне было интересно, есть ли альтернативы Jquery для анимации высоты Div в JavaScript? Хотя 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

WebOS использует мобильный WebKit, поэтому большую часть работы вы можете выполнять с помощью CSS:

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

Тогда ваш JavaScript действительно прост:

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/