Je me demandais s'il existe des alternatives à Jquery pour animer les hauteurs de Div en JavaScript? Bien que Jquery soit génial et relativement petit, je ne veux pas charger l'intégralité de jquery uniquement pour cette fonctionnalité. Et étant donné que c'est pour une application WebOs (pas une application Web), je dois garder le temps de chargement aussi petit que possible.

Merci

2
levi 19 oct. 2011 à 18:43

3 réponses

Meilleure réponse
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) 
   }
}

Joli violon: http://jsfiddle.net/maniator/Z6cbq/

3
Naftali aka Neal 4 nov. 2011 à 14:17

WebOS utilise WebKit mobile, vous pouvez donc faire la plupart du travail avec CSS:

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

Ensuite, votre JavaScript est vraiment simple:

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

Voici quelques détails supplémentaires: http: / /pre101.com/blog/2009/11/10/a-guide-to-css-transitions-in-webos/

2
Brian Nickel 19 oct. 2011 à 14:51

Une bibliothèque d'animation de bones pesant à 1 KB:

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

1
Kernel James 31 janv. 2013 à 10:20