Question

我想知道Jquery有什么替代方案可以在JavaScript中设置Div高度的动画吗？虽然Jquery很棒且相对较小，但我不想仅为这一功能加载整个jquery。考虑到这是针对WebO应用程序（不是Web应用程序），我需要尽可能减少加载时间。

由于

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/

用于动画div高度的轻量级Javascript？

3 个答案: