Question

我有一个显示简单＆lt; ul＆gt;的应用程序项目清单。当用户点击新的“类别”时，我想用新项目列表替换项目列表。

我愿意接受其他过渡建议，但我开始的是 -

缩小或滑动并删除现有的项目列表节点
动态（Javascript DOM方法）创建一个高度为0
将新列表附加到页面并展开或幻灯片下载

我正在使用Yahoo的YUI3库，它还没有原生的'slideup'或'slidedown'方法，因此我正在模拟它们。我可以通过执行设置height = 0的简单动画来轻松模拟“幻灯片”，但是我无法模拟“滑动”方法，因为我不知道＆lt; ul＆gt;的最终高度了。列表（我正在动态构建）。

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

我看了几个可以上下滑动div（jQuery）的Javascript库，看起来只是保存了原来的高度值 - 但这将是“自动”......这是行不通的。也许它首先计算实际高度？

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

谢谢， -Luther

Answer 1

我认为这或多或少都是你想要的。诀窍是有两个嵌套的div。外部控制实际高度，内部控制用于计算自然高度。动画完成后，外部div会在展开时恢复为“auto”，以便您可以动态添加更多列表元素。

这是从JQuery blog post无耻改编的。

<!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>

Answer 2

将溢出设置为可见的min-height属性怎么样？

滑动div的“高度：自动”技巧是什么？

2 个答案: