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

发布于 2024-12-10 22:34:45 字数 153 浏览 0 评论 0 原文

我想知道在 JavaScript 中动画 Div 高度是否有 Jquery 的替代方案？虽然 Jquery 很棒而且相对较小，但我不想仅仅为了这一功能而加载整个 jquery。考虑到这是针对 WebOs 应用程序（而不是 Web 应用程序），我需要保持加载时间尽可能短。

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

镜花水月 2024-12-17 22:34:45

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/

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) 
   }
}

Nice fiddle: http://jsfiddle.net/maniator/Z6cbq/

回复收藏 0 原文

嘿嘿嘿 2024-12-17 22:34:45

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.

WebOS uses mobile WebKit, so you could do most of the work with CSS:

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

Then your JavaScript is really easy:

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

Here's some more details: http://pre101.com/blog/2009/11/10/a-guide-to-css-transitions-in-webos/

回复收藏 0 原文