2

我有一个应用程序,它显示一个简单的 <ul> 项目列表。当用户单击新的“类别”时,我想用的项目列表替换项目列表。

我愿意接受额外的过渡建议,但我开始的是——

  1. 缩小或向上滑动并移除现有项目列表节点
  2. 动态(Javascript DOM 方法)创建高度为 0 的新项目列表
  3. 将新列表附加到页面并展开或向下滑动

我正在使用 Yahoo 的 YUI3 库,它还没有原生的“slideup”或“slidedown”方法,所以我正在模拟它们。我可以通过执行一个设置 height=0 的简单动画轻松模拟“slideup”,但由于我不知道 <ul> 列表的最终高度(我正在动态构建)。

我希望高度合适——即:表现得像普通的 html——这意味着我想要“height:auto”......但是 YUI3 无法将 CSS 属性从 height:0 设置为动画/过渡到 height:auto。它需要一个浮点值。

我查看了一些可以上下滑动 div 的 Javascript 库(jQuery),并且似乎只是简单地保存了高度的原始值 - 但那将是“自动”......这是行不通的。也许它首先以某种方式计算实际高度?

任何人都可以通过最好的方式来做到这一点吗?我是否需要在构建列表时手动计算高度...然后将其样式设置为 height:0,然后将其设置为计算出的高度,然后将其样式设置为 height:auto 以确保它是保持良好状态?如果是这样,那么跨浏览器的方法是什么?

谢谢,-路德

4

2 回答 2

1

我认为这或多或少是您正在寻找的。诀窍是有两个嵌套的div。外层控制实际高度,内层用于计算自然高度。动画完成后,外部 div 如果展开则恢复为“auto”,以便您可以动态添加更多列表元素。

这是无耻地改编自JQuery 博客文章

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Animate to Auto</title> 
<style type="text/css"> 
.inner {background:#ccc;height:auto;overflow:hidden;}
.inner ol{margin:0;}
.box{height:0px;overflow:hidden;}
</style> <script type="text/javascript" charset="utf-8"
        src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js">
</script>
</head> 
<body> 
<button class="btn">Toggle Height</button> 
<div class="box"> 
<div class="inner"> 
  <ol> 
    <li>Bashful</li> 
    <li>Doc</li> 
    <li>Dopey</li> 
    <li>Grumpy</li> 
    <li>Happy</li> 
    <li>Sleepy</li> 
    <li>Sneezy</li> 
  </ol> 
</div> 
</div>
OTHER STUFF HERE

<script> 
YUI().use('node', 'event', 'anim', function(Y) {

    var heightAnim = new Y.Anim({
      node: Y.one('.box'),
      to: {
        height: 0
      }
    });

    heightAnim.on('end', function (e) {
      var box = heightAnim.get('node');
      if (parseInt(box.getStyle('height')) > 0) {
        box.setStyle('height', 'auto');
      }
    });

    Y.one('.btn').on('click', function(e){
      var box = this.get('node');
      var inner = box.one('.inner');
      var boxH = box.getStyle('height');
      if (boxH === 'auto') {
        box.setStyle('height',inner.getStyle('height'));
        this.set('to', {height: 0});
        this.run();
      } else {
        this.set('to', {height: parseInt(inner.getStyle('height'))});
        this.run();
      }
    },heightAnim);

});
</script> 
</body> 
</html> 
于 2010-12-07T18:40:52.193 回答
0

将溢出的最小高度属性设置为可见怎么样?

于 2010-12-05T02:29:47.780 回答