How do I make my transition smooth?
Question
I am trying to get my panel to smoothly change size whem I'm clicking on the date, but am stuck on how to do that. Here's my code:
<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>
And the relevant css and js parts:
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");
}
Now, I had to give the #top-nav element the initial height, because without it the transition would not work at all, but that is causing the #period_selection text to show up BEFORE the div is fully transformed.
I tried to do this the other way, and apply the transition/size change to the #period_selection , but that did not seemed to have any effect at all - even when I applied some initial height to that element, there is no smooth transition and it all just pops in.
I have this strange feeling, that it may have something to do with the "display" property, but I can't put my finger on it.
How can I make this work? Thanks in advance for the help.
1 answers
solution1
0 ACCPTED 2017-10-18 22:26:17
You should use max-height and overflow: hidden instead of height and display: none and apply it to the hidden content.
Overflow: hidden will take care the only text in expanded area is displayed. And setting max-height will ensure a smooth transition.
I've modified your provided code:
<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>
For further details take a look at https://css-tricks.com/using-css-transitions-auto-dimensions/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.