Javascript 什么'；这是“什么？”；高度：自动“；滑倒跳水的诀窍
我有一个应用程序，它显示一个简单的Javascript 什么'；这是“什么？”；高度：自动“；滑倒跳水的诀窍,javascript,jquery,animation,yui3,Javascript,Jquery,Animation,Yui3,我有一个应用程序，它显示一个简单的项目列表。当用户点击一个新的“类别”时，我想用一个新的项目列表替换项目列表 我愿意接受额外的过渡建议，但我从-- 收缩或向上滑动并删除现有项目列表节点 动态（Javascript DOM方法）创建高度为0的新项目列表 将新列表附加到页面并展开或向下滑动 我使用的是雅虎的YUI3库，它还没有原生的“slideup”或“slidedown”方法，所以我在模拟它们。我可以通过执行一个简单的动画来轻松地模拟“slideup”，该动画将高度设置为0，但我很难模拟“slid
- 项目列表。当用户点击一个新的“类别”时，我想用一个新的项目列表替换项目列表
我愿意接受额外的过渡建议，但我从--
- 收缩或向上滑动并删除现有项目列表节点
- 动态（Javascript DOM方法）创建高度为0的新项目列表
- 将新列表附加到页面并展开或向下滑动 我使用的是雅虎的YUI3库，它还没有原生的“slideup”或“slidedown”方法，所以我在模拟它们。我可以通过执行一个简单的动画来轻松地模拟“slideup”，该动画将高度设置为0，但我很难模拟“slidedown”方法，因为我不知道
- 列表的最终高度（我正在动态构建）
我希望高度是适当的-即：行为就像正常的html-这意味着我想要“高度：自动”。。。但是YUI3无法设置CSS属性从height:0到height:auto的动画/转换。它需要一个浮点值
我看了一些Javascript库，它们可以上下滑动div（jQuery），看起来只是保存高度的原始值——但这是“自动”的。。。这是行不通的。也许是先计算出实际的高度
有没有人能找到最好的方法？我是否需要在创建列表时手动计算高度。。。然后将其样式设置为“高度：0”，然后将其动画设置为计算的高度，然后将其样式设置为“高度：自动”，以确保其处于良好状态？如果是这样，跨浏览器的方式是什么
谢谢，
-Luther将溢出设置为可见的min height属性怎么样？我认为这或多或少就是您要寻找的。诀窍是有两个嵌套的div。外部控制实际高度，内部控制用于计算自然高度。动画完成后，如果展开，外部div将恢复为“auto”，以便可以动态添加更多列表元素 这是无耻地改编自一部电影
自动设置动画
.inner{背景：#ccc；高度：自动；溢出：隐藏；}
.内部ol{margin:0；}
.box{高度：0px；溢出：隐藏；}
切换高度
害羞的
文件
多愁善感
脾气暴躁
快乐
困倦的
打喷嚏
这里还有其他东西
YUI（）。使用（'node'，'event'，'anim'，function（Y）{
var heightAnim=新Y.Anim({
节点：Y.one（“.box”），
致：{
身高：0
}
});
heightAnim.on（'end'，函数（e）{
var-box=heightAnim.get（'node'）；
if（parseInt（box.getStyle（'height'））>0）{
box.setStyle（'height'，'auto'）；
}
});
Y.one（'.btn'）。在（'click'，函数（e）上{
var-box=this.get（'node'）；
var-inner=box.one（'.inner'）；
var-boxH=box.getStyle（'height'）；
如果（boxH==='auto'）{
box.setStyle（'height'，inner.getStyle（'height'）；
set（'to'，{height:0}）；
这个。run（）；
}否则{
set（'to'，{height:parseInt（internal.getStyle（'height'））}）；
这个。run（）；
}
}，heightAnim）；
});
<!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>