【发布时间】：2016-08-25 18:01:47
【问题描述】：
在开始之前，我已经查看了与此主题相关的其他问题。我写另一个问题的原因是因为我的网站将使用 jQuery 动画加载，而且它似乎与我只是自动为高度设置动画一样工作。
我个人认为这与我在 CSS 中将 CSS 高度设置为自动有关。无论如何，我希望网站（当它加载时）动画到高度自动，而不是此刻设定的高度。我已尝试获取 scrollHeight 并将其设置为该值的动画，但我尝试了 3-4 个答案没有动画。
目前我正在使用：
$(".portfolio").animate({height:"590px"});
我的 .portfolio css 是
.portfolio {
width: 0px;
height: 0px;
max-height: 600px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
在我为 .row（.portfolio 内部）设置动画之前，可能会发现 .portfolio 的高度为 0，因为 .row 的显示设置为无。
在基本术语中，我需要获取元素 (.portfolio) 的自动高度，即使由于隐藏元素而没有可见内容（使页面加载时自动）设置为 0。
不透明而不是显示：无将无法解决此问题。我需要 .PORTFOLIO 的高度在页面加载时为 0。
如果我可以发布任何其他内容以使其更容易，请告诉我
我尝试了与问题相关的答案： JavaScript jQuery Animate to Auto Height
您可以通过以下方式查看该网站：http://conorreid.me/portfolio/ 我真的希望可以发布网站链接。我觉得这个问题很难解释为什么我需要这个，希望你能看到。
编辑：
我复制了.portfolio 元素并将其重命名为portfolio-2，我将其设置为绝对和z-index：-100，不透明度为0（高度为自动）。然后我尝试获取这个元素的高度（我的显示器上的 558）并将 .portfolio 设置为这个高度
var el = $('.portfolio-2'),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();
$(".portfolio").height(curHeight).animate({height: autoHeight}, 1000);
但现在我只是不确定为什么这不起作用......我实际上正在使用
<script>alert($(".portfolio-2").css("height"))</script>
提醒我高度，我在显示器分辨率上得到 264，但是在页面完全加载后我输入 $(".portfolio-2").height() 我得到 592 我应该做..
【问题讨论】：
-
您不能将动画设置为“自动”。但是你可以使用
max-height: 0;，然后动画到max-height: 100000px;。当然这需要overflow: hidden;。 -
@connexo 我可以获取元素的高度并动画到该高度，然后将 CSS 更改为自动。 stackoverflow.com/questions/5003220/…。我的问题是无法获得动画的“自动”高度，因为动画没有一个
-
我提出了一个不需要 Javascript 的解决方案。你试过了吗？
-
我没有，但是因为一切都建立在延迟之上，而且我不太擅长 CSS 过渡
-
你不能从一个没有高度的元素开始，然后期望 jQuery 弄清楚
auto会是什么。您必须实际渲染auto中的元素，然后获取类似clientHeight的内容才能准确了解auto的像素数。
标签： javascript jquery css animation