我正在处理网站，我使用一些简单的 css 和 js 使 div 展开并隐藏了文本。任何人都可以教我如何使文本随着过渡一起扩展？ 仅供引用，我对网页设计的了解有限，如果我的代码困惑，请见谅。
<html>
<style>
body, html {
height: 100%;
background-color: black;
text-align: center;
font-family: 'Roboto', sans-serif;
margin: 0;
}
p.italic {
font-size: 150%;
line-height: 50px;
font-style:italic;
}
p {
font-size: 100%;
line-height: 25px;
}
h1 {
font-size: 400%;
}
.container1 {
height: 80px;
background-color:white;
margin-left:50px;
margin-right:50px;
transition: all 2s ease;
}
.container1expanded {
height: 280px;
transition: all 2s ease;
line-height: normal;
}
.container1 h1 {
font-size: 400%;
line-height: 40px;
}
#container1p {
display: none;
transition: all 2s ease;
}
<body>
</style>
<script type="text/javascript">
function expand(){
document.getElementById("container1").style.height= "280px";
document.getElementById("container1p").style.display= "block";
}
</script>
<div class="container1" id="container1">
<h1 onclick="expand()">Lorem ipsum</h1>
<div id="container1p">
<p class="italic">Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis eget felis at tempor. Phasellus bibendum auctor massa condimentum venenatis.
</p>
</div>
</div>
</body>
<html>最佳答案
如果您将 overflow: hidden 添加到扩展元素，文本将不会自动弹出到页面上 - 默认情况下，文本将隐藏/剪裁在扩展元素中，并且它会扩展，随着高度的增加，它会显示文本。我还调整了扩展元素的底部高度。
<html>
<style>
body, html {
height: 100%;
background-color: black;
text-align: center;
font-family: 'Roboto', sans-serif;
margin: 0;
}
p.italic {
font-size: 150%;
line-height: 50px;
font-style:italic;
}
p {
font-size: 100%;
line-height: 25px;
}
h1 {
font-size: 400%;
}
.container1 {
background-color:white;
margin-left:50px;
margin-right:50px;
transition: all 2s ease;
overflow: hidden;
height: 100px;
}
.container1expanded {
height: 280px;
transition: all 2s ease;
line-height: normal;
}
.container1 h1 {
font-size: 400%;
line-height: 40px;
}
#container1p {
display: none;
transition: all 2s ease;
}
<body>
</style>
<script type="text/javascript">
function expand(){
document.getElementById("container1").style.height= "280px";
document.getElementById("container1p").style.display= "block";
}
</script>
<div class="container1" id="container1">
<h1 onclick="expand()">Lorem ipsum</h1>
<div id="container1p">
<p class="italic">Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis eget felis at tempor. Phasellus bibendum auctor massa condimentum venenatis.
</p>
</div>
</div>
</body>
<html>关于javascript - 展开带有动画的 div 容器，其中包含文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44550294/