所以我需要找到一个元素的高度来正确地过渡它。我的问题是这个元素最初没有高度，因为它会弄乱我的网站布局。
此值根据用于查看网站的设备而变化，它是我的文本框的高度。
或许可以在不隐藏文本的情况下加载页面，然后获取高度并使用 javascript 隐藏它，但我认为这根本不是一个理想的解决方案。
我的目标是无论页面是纯图像还是显示文本，在这两种情况下，所有内容都应垂直和水平居中。
document.getElementById("intro-img").onclick = function() {
$("#intro-img").toggleClass('show');
$("#text").toggleClass('show');
}.full-size {
height: 100vh;
overflow: hidden;
}
.title-img {
max-height: 250px;
}
#intro-img {
cursor: pointer;
height: 250px;
transition: all 0.75s linear;
}
#intro-img.show {
height: 125px;
}
#text {
opacity: 0;
height: 0;
transition: all 0.75s linear;
overflow: hidden;
}
#text.show {
opacity: 1;
height: 105px; /* I need this value set based on vw */
}
.container {
margin-left: auto !important;
margin-right: auto !important;
}
.row {
width: 100%;
margin-left: auto !important;
margin-right: auto !important;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container full-size valign-wrapper">
<div class="row">
<div class="col s12 center-align">
<img id="intro-img" class="responsive-img title-img" src="http://undeadleech.com/img/UndeadLeech_x3_round.png">
</div>
<div id="text" class="col s12 center-align">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</div>
</body>最佳答案
您需要渲染元素以获得其高度 AFAIK，考虑到这一点怎么样
- 最初通过设置
height: auto来呈现带有您的元素的页面，就好像它具有高度一样(忽略height: 0) - 获取元素的高度
- 删除插入的内联样式，即
height: auto - 创建一个
<style>用你拥有的这个特殊规则标记
重要说明:如果您调整页面大小，请不要忘记使用新高度重新创建样式
var $text = $('#text')
$text.css({ height: 'auto' })
var height = $text.css('height')
$text.css({ height: '' })
// runtime style taken from
// http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#text.show { height: ' + height + ' }';
document.getElementsByTagName('head')[0].appendChild(style);
document.getElementById("intro-img").onclick = function() {
$("#intro-img").toggleClass('show');
$("#text").toggleClass('show');
}.full-size {
height: 100vh;
overflow: hidden;
}
.title-img {
max-height: 250px;
}
#intro-img {
cursor: pointer;
height: 250px;
transition: all 0.75s linear;
}
#intro-img.show {
height: 125px;
}
#text {
opacity: 0;
height: 0;
transition: all 0.75s linear;
overflow: hidden;
}
#text.show {
opacity: 1;
/*height: 105px; /* I need this value set based on vw */
}
.container {
margin-left: auto !important;
margin-right: auto !important;
}
.row {
width: 100%;
margin-left: auto !important;
margin-right: auto !important;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<body>
<div class="container full-size valign-wrapper">
<div class="row">
<div class="col s12 center-align">
<img id="intro-img" class="responsive-img title-img" src="http://undeadleech.com/img/UndeadLeech_x3_round.png">
</div>
<div id="text" class="col s12 center-align">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</div>
</body>关于javascript - 获取不可见元素高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36961293/