我试图让我的面板在我点击日期时平滑地改变大小，但我不知道如何做到这一点。这是我的代码:
<div id="top-nav">
<div>
<p class="text-right">
Rozliczenie za okres: <span id="period_from" class="period" onmouseout="highlightPeriod()" onmouseover="highlightPeriod()" onclick="getNewPeriod()">
24 <?= $data['okres']['od_miesiac'] . " " . $data['okres']['od_rok']; ?></span>
do <span id="period_to" class="period" onmouseout="highlightPeriod()" onmouseover="highlightPeriod()" onclick="getNewPeriod()">
23 <?= $data['okres']['do_miesiac'] . " " . $data['okres']['do_rok']; ?></span></p>
<p id="period_selection" class="text-right hidden">
<span id="period1">Od ... do ...</span><br>
<span id="period2">Od ... do ...</span><br>
<span id="period3">Od ... do ...</span><br>
<span id="period4">Od ... do ...</span><br>
<span id="period5">Od ... do ...</span><br>
<span id="period6">Od ... do ...</span>
</p>
<p class="text-right">
Dzisiaj jest: <span class="accent"><?= $data['dzienTygodnia'] . ', ' . $data['dzien'] . ' ' . $data['miesiac']; ?></span>
</p>
</div>
</div>
以及相关的 css 和 js 部分:
div#top-nav {
height: 100px;
padding: 5px;
margin: auto;
border-radius: 5px;
display: flex;
position: sticky;
top: -8px;
background-color: rgba(242, 184, 9, 0.9);
justify-content: space-around;
box-shadow: 0 5px 5px -3px gray;
border-bottom: 2px solid #F37402;
transition-duration: 2s;
}
p#period_selection {
transition-duration: 2s;
cursor: pointer;
}
.hidden {
display: none;
}
function getNewPeriod() {
let el = $("#period_selection");
$("#top-nav").css("height", "500px");
el.css("display") == "none" ? el.css("display", "block") : el.css("display", "none");
}
现在，我必须为 #top-nav 元素提供初始高度，因为如果没有它，过渡将根本无法工作，但这会导致 #period_selection 在 div 完全转换之前显示的文本。
我尝试以另一种方式执行此操作，并将过渡/大小更改应用于 #period_selection，但这似乎根本没有任何效果 - 即使我应用了一些初始高度到那个元素，没有平滑的过渡，它只是突然出现。
我有这种奇怪的感觉，它可能与“显示”属性有关，但我无法确定。
我怎样才能使这项工作？ 预先感谢您的帮助。
最佳答案
您应该使用 max-height 和 overflow: hidden 而不是 height 和 display: none 并将其应用于隐藏内容。
Overflow: hidden 将只显示扩展区域中的文本。 并且设置 max-height 将确保平滑过渡。
我修改了你提供的代码:
<html>
<head>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="top-nav">
<div>
<p class="text-right">
Rozliczenie za okres: <span id="period_from" class="period" onmouseout="highlightPeriod()" onmouseover="highlightPeriod()" onclick="getNewPeriod()">
24<!--?= $data['okres']['od_miesiac'] . " " . $data['okres']['od_rok']; ?-->
</span> do <span id="period_to" class="period" onmouseout="highlightPeriod()" onmouseover="highlightPeriod()" onclick="getNewPeriod()">
23<!--?= $data['okres']['do_miesiac'] . " " . $data['okres']['do_rok']; ?-->
</span>
</p>
<p id="period_selection" class="text-right hidden">
<span id="period1">Od ... do ...</span><br/>
<span id="period2">Od ... do ...</span><br/>
<span id="period3">Od ... do ...</span><br/>
<span id="period4">Od ... do ...</span><br/>
<span id="period5">Od ... do ...</span><br/>
<span id="period6">Od ... do ...</span><br/>
</p>
<p class="text-right">
Dzisiaj jest: <span class="accent">
<!--?= $data['dzienTygodnia'] . ', ' . $data['dzien'] . ' ' . $data['miesiac']; ?-->
</span>
</p>
</div>
</div>
<style>
div#top-nav {
padding: 5px;
margin: auto;
border-radius: 5px;
display: flex;
position: sticky;
top: -8px;
background-color: rgba(242, 184, 9, 0.9);
justify-content: space-around;
box-shadow: 0 5px 5px -3px gray;
border-bottom: 2px solid #F37402;
}
p#period_selection {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
overflow: hidden;
max-height: 300px;
cursor: pointer;
}
p#period_selection.hidden {
max-height: 0;
overflow: hidden;
}
</style>
<script>
function getNewPeriod() {
let el = $("#period_selection");
$("#top-nav").toggleClass("expanded");
el.toggleClass("hidden");
}
function highlightPeriod() {
//do fancy stuff here
}
</script>
</body>
</html>有关更多详细信息，请查看 https://css-tricks.com/using-css-transitions-auto-dimensions/
关于javascript - 如何让我的过渡顺利？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46819591/