මෙම ප්‍රශ්නයට තිස්වන පිළිතුර මෙය බව මම දනිමි, නමුත් එය වටිනවා යැයි මම සිතමි. මෙය පහත සඳහන් ගුණාංග සහිත CSS පමණක් විසඳුමකි:
- ආරම්භයේ ප්‍රමාදයක් නොමැති අතර සංක්‍රාන්තිය කලින් නතර නොවේ. දෙපැත්තෙන්ම (පුළුල් කිරීම හා කඩා වැටීම), ඔබ ඔබේ CSS හි සංක්‍රාන්ති කාල සීමාව 300ms ලෙස සඳහන් කරන්නේ නම්, සංක්‍රාන්තිය 300ms, කාල පරිච්ඡේදයක් ගතවේ.
- එය සත්‍ය උස සංක්‍රමණය කරයි (මෙන් නොව
transform: scaleY(0)), එබැවින් බිඳෙනසුලු මූලද්‍රව්‍යයෙන් පසුව අන්තර්ගතයක් තිබේ නම් එය නිවැරදි දේ කරයි.
- එහි (වෙනත් විසඳුම් වැනි) අතර වේ (මෙන් "ඔයාගේ පෙට්ටිය වඩා වැඩි බව දිග මෙතෙක් වනු ඇත තෝරාගන්න") මැජික් අංක, එය ඔබගේ උපකල්පනය වැරදි ජීවියෙක් නම් නොවේ මාරක වේ. සංක්‍රාන්තිය එවැනි අවස්ථාවක දී පුදුම සහගත ලෙස පෙනෙන්නට නොතිබිය හැකි නමුත් සංක්‍රාන්තියට පෙර සහ පසු මෙය ගැටළුවක් නොවේ: පුළුල් කළ (
height: auto) තත්වය තුළ, සමස්ත අන්තර්ගතයටම සෑම විටම නිවැරදි උස ඇත (උදා: ඔබ max-heightහැරෙන දෙයක් තෝරා ගන්නේ නම් මෙන් නොව) ඉතා අඩු). බිඳ වැටුණු තත්වයේ දී, උස ශුන්‍ය වේ.
නිරූපණය
මෙන්න එකම බිඳවැටෙන මූලද්රව්ය තුනක්, විවිධ උසකින් යුත් සියල්ලම එකම CSS භාවිතා කරන නිරූපණයක්. "ධාවන ස්නිපෙට්" ක්ලික් කිරීමෙන් පසු ඔබට "සම්පූර්ණ පිටුව" ක්ලික් කිරීමට අවශ්ය විය හැකිය. ජාවාස්ක්රිප්ට් collapsedසීඑස්එස් පන්තියට පමණක් ටොගල් කරන බව සලකන්න , මිනුම් කිරීමක් නොමැත. (ඔබට කිසියම් ජාවාස්ක්රිප්ට් එකක් නොමැතිව චෙක් කොටුවක් භාවිතා කිරීමෙන් මෙම නිර්‍මාණ නිරූපණය කළ හැකිය :target). සංක්‍රාන්තිය සඳහා වගකිව යුතු CSS හි කොටස ඉතා කෙටි බවත්, HTML සඳහා අවශ්ය වන්නේ එක් අතිරේක ආවරණයක් පමණක් බවත් මතක තබා ගන්න.
$(function () {
$(".toggler").click(function () {
$(this).next().toggleClass("collapsed");
$(this).toggleClass("toggled"); // this just rotates the expander arrow
});
});
.collapsible-wrapper {
display: flex;
overflow: hidden;
}
.collapsible-wrapper:after {
content: '';
height: 50px;
transition: height 0.3s linear, max-height 0s 0.3s linear;
max-height: 0px;
}
.collapsible {
transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
margin-bottom: 0;
max-height: 1000000px;
}
.collapsible-wrapper.collapsed > .collapsible {
margin-bottom: -2000px;
transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),
visibility 0s 0.3s, max-height 0s 0.3s;
visibility: hidden;
max-height: 0;
}
.collapsible-wrapper.collapsed:after
{
height: 0;
transition: height 0.3s linear;
max-height: 50px;
}
/* END of the collapsible implementation; the stuff below
is just styling for this demo */
#container {
display: flex;
align-items: flex-start;
max-width: 1000px;
margin: 0 auto;
}
.menu {
border: 1px solid #ccc;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
margin: 20px;
}
.menu-item {
display: block;
background: linear-gradient(to bottom, #fff 0%,#eee 100%);
margin: 0;
padding: 1em;
line-height: 1.3;
}
.collapsible .menu-item {
border-left: 2px solid #888;
border-right: 2px solid #888;
background: linear-gradient(to bottom, #eee 0%,#ddd 100%);
}
.menu-item.toggler {
background: linear-gradient(to bottom, #aaa 0%,#888 100%);
color: white;
cursor: pointer;
}
.menu-item.toggler:before {
content: '';
display: block;
border-left: 8px solid white;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
width: 0;
height: 0;
float: right;
transition: transform 0.3s ease-out;
}
.menu-item.toggler.toggled:before {
transform: rotate(90deg);
}
body { font-family: sans-serif; font-size: 14px; }
*, *:after {
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="menu">
<div class="menu-item">Something involving a holodeck</div>
<div class="menu-item">Send an away team</div>
<div class="menu-item toggler">Advanced solutions</div>
<div class="collapsible-wrapper collapsed">
<div class="collapsible">
<div class="menu-item">Separate saucer</div>
<div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
<div class="menu-item">Ask Worf</div>
<div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
<div class="menu-item">Ask Q for help</div>
</div>
</div>
<div class="menu-item">Sweet-talk the alien aggressor</div>
<div class="menu-item">Re-route power from auxiliary systems</div>
</div>
<div class="menu">
<div class="menu-item">Something involving a holodeck</div>
<div class="menu-item">Send an away team</div>
<div class="menu-item toggler">Advanced solutions</div>
<div class="collapsible-wrapper collapsed">
<div class="collapsible">
<div class="menu-item">Separate saucer</div>
<div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
</div>
</div>
<div class="menu-item">Sweet-talk the alien aggressor</div>
<div class="menu-item">Re-route power from auxiliary systems</div>
</div>
<div class="menu">
<div class="menu-item">Something involving a holodeck</div>
<div class="menu-item">Send an away team</div>
<div class="menu-item toggler">Advanced solutions</div>
<div class="collapsible-wrapper collapsed">
<div class="collapsible">
<div class="menu-item">Separate saucer</div>
<div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
<div class="menu-item">Ask Worf</div>
<div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
<div class="menu-item">Ask Q for help</div>
<div class="menu-item">Separate saucer</div>
<div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
<div class="menu-item">Ask Worf</div>
<div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
<div class="menu-item">Ask Q for help</div>
</div>
</div>
<div class="menu-item">Sweet-talk the alien aggressor</div>
<div class="menu-item">Re-route power from auxiliary systems</div>
</div>
</div>
එය ක්රියාත්මක වන්නේ කෙසේද?
ඇත්ත වශයෙන්ම මෙය සිදු කිරීම සඳහා සංක්‍රාන්ති දෙකක් සම්බන්ධ වේ. ඒවායින් එකක් margin-bottom0px (පුළුල් කළ තත්වයේ) සිට -2000pxබිඳ වැටුණු තත්වයට ( මෙම පිළිතුරට සමාන ) සංක්‍රමණය වේ. මෙහි 2000 යනු පළමු මැජික් අංකයයි, එය පදනම් වී ඇත්තේ ඔබේ කොටුව මීට වඩා වැඩි නොවනු ඇතැයි යන උපකල්පනය මත ය (පික්සල් 2000 සාධාරණ තේරීමක් සේ පෙනේ).
margin-bottomසංක්‍රාන්තිය තනිවම භාවිතා කිරීම ගැටළු දෙකක් ඇත:
- ඔබ සතුව ඇත්ත වශයෙන්ම පික්සල් 2000 ට වඩා වැඩි පෙට්ටියක් තිබේ නම්, එවිට
margin-bottom: -2000pxසියල්ල සැඟවිය නොහැක - කඩා වැටුණු නඩුවේදී පවා දෘශ්‍යමාන දේවල් තිබේ. මෙය සුළු විසඳුමක් වන අතර පසුව අපි එය කරන්නෙමු.
- සත්‍ය පෙට්ටිය පික්සල් 1000 ක් උස නම් සහ ඔබේ සංක්‍රාන්තිය මීටර් 300 ක් දිග නම්, දෘශ්‍ය සංක්‍රාන්තිය මීටර 150 කට පමණ පසු දැනටමත් අවසන් වී ඇත (නැතහොත් ප්‍රතිවිරුද්ධ දිශාවට මීටර් 150 ක් ප්රමාද වී ආරම්භ වේ).
මෙම දෙවන ගැටළුව නිරාකරණය කිරීම යනු දෙවන සංක්‍රාන්තිය පැමිණෙන ස්ථානය වන අතර, මෙම සංක්‍රාන්තිය සංකල්පමය වශයෙන් එතුමගේ අවම උස ඉලක්ක කරයි (“සංකල්පමය වශයෙන්” අපි ඇත්ත වශයෙන්ම මේ min-heightසඳහා දේපල භාවිතා නොකරන නිසා ; පසුව වැඩි විස්තර).
පහළ ආන්තික සංක්‍රාන්තිය අවම උස සංක්‍රාන්තිය සමඟ සමාන කාල පරිච්ඡේදයක් සමඟ සංයෝජනය කරන්නේ කෙසේද යන්න පෙන්වන සජීවිකරණයක් මෙහි දැක්වේ, එකම කාල සීමාවක් ඇති සම්පූර්ණ උස සිට ශුන්‍ය උස දක්වා ඒකාබද්ධ සංක්‍රාන්තියක් අපට ලබා දෙයි.
දෘශ්‍ය උස අඩු කරමින් negative ණ පහළ ආන්තිකය පහළට තල්ලු කරන ආකාරය වම් තීරුව පෙන්වයි. කඩා වැටෙන අවස්ථාවෙහිදී, සංක්‍රාන්තිය කලින් අවසන් නොවන බව අවම උස සහතික කරන ආකාරය මැද තීරුව පෙන්වයි. නිවැරදි තීරුව මඟින් දෙකෙහි සංයෝජනය නිවැරදි කාලය තුළ කොටුව සම්පූර්ණ උස සිට ශුන්‍ය උස දක්වා සංක්‍රමණය වීමට හේතු වන ආකාරය පෙන්වයි.
මගේ නිරූපණය සඳහා මම අවම අවම උස අගය ලෙස 50px මත පදිංචි වී සිටිමි. මෙය දෙවන මැජික් අංකය වන අතර එය කොටුවේ උස වෙන කවරදාටත් වඩා අඩු විය යුතුය. 50px ද සාධාරණ බව පෙනේ; මුලින්ම පික්සල් 50 ක්වත් නොඉක්මවන මූලද්‍රව්‍යයක් බිඳවැටීමට ඔබට බොහෝ විට අවශ්ය වනු ඇතැයි සිතිය නොහැක.
සජීවිකරණයේ ඔබට දැකිය හැකි පරිදි, එහි ප්‍රති trans ලයක් ලෙස සිදුවන සංක්‍රාන්තිය අඛණ්ඩව පවතී, නමුත් එය වෙනස් කළ නොහැක - අවම උස පහළ ආන්තිකය මඟින් සකස් කරන ලද සම්පූර්ණ උස හා සමාන වන මොහොතේ, වේගයේ හදිසි වෙනසක් දක්නට ලැබේ. සජීවිකරණයේ මෙය ඉතා කැපී පෙනෙන්නේ එය සංක්‍රාන්ති දෙකටම රේඛීය කාල ශ්‍රිතයක් භාවිතා කරන නිසා සහ සමස්ත සංක්‍රාන්තිය ඉතා මන්දගාමී බැවිනි. සත්‍ය අවස්ථාවේ දී (ඉහළින් මගේ නිරූපණය), සංක්‍රාන්තිය ගත වන්නේ මීටර් 300 ක් පමණක් වන අතර පහළ ආන්තික සංක්‍රාන්තිය රේඛීය නොවේ. සංක්‍රාන්ති දෙකටම මම විවිධ කාල නියමයන් සමඟ සෙල්ලම් කර ඇති අතර, මා විසින් අවසන් කරන ලද ඒවා පුළුල්ම විවිධාකාර අවස්ථාවන් සඳහා වඩාත්ම හොඳින් ක්රියා කළ බවක් මට හැඟුණි.
විසඳීමට ගැටළු දෙකක් ඉතිරිව ඇත:
- කඩා වැටුණු තත්වයේ පික්සල් 2000 ට වඩා උස පෙට්ටි සම්පූර්ණයෙන්ම සැඟවී නැති ඉහළ සිට ලක්ෂ්‍යය,
- සහ ප්‍රතිලෝම ගැටළුව, සැඟවී නොමැති අවස්ථාවක, සංක්‍රාන්තිය ක්රියාත්මක නොවන විට පවා පික්සල් 50 ට වඩා අඩු උසකින් යුත් පෙට්ටි වැඩිය, මන්ද අවම උස ඒවා පික්සල් 50 ක තබා ගනී.
max-height: 0බිඳවැටුණු නඩුවේ බහාලුම් මූලද්රව්යය 0s 0.3sසංක්‍රාන්තියකින් ලබා දීමෙන් අපි පළමු ගැටළුව විසඳන්නෙමු . මෙයින් අදහස් කරන්නේ එය සැබවින්ම සංක්‍රාන්තියක් නොවන නමුත් max-heightඑය ප්‍රමාදයකින් ක්රියාත්මක වන බවයි; එය අදාළ වන්නේ සංක්‍රාන්තිය අවසන් වූ පසු පමණි. මෙය නිවැරදිව ක්රියාත්මක වීමට නම්, max-heightප්‍රතිවිරුද්ධ, බිඳවැටෙන්නේ නැති, සංඛ්‍යා සඳහා සංඛ්යාවක් තෝරා ගත යුතුය . නමුත් 2000px නඩුවේදී මෙන් නොව, විශාල සංඛ්යාවක් තෝරාගැනීම සංක්‍රාන්තියේ ගුණාත්මක භාවයට බලපායි, මේ අවස්ථාවේ දී, එය ඇත්ත වශයෙන්ම වැදගත් නොවේ. ඒ නිසා අපට ඉතා ඉහළ සංඛ්යාවක් තෝරා ගත හැකි අතර කිසිදු උසකට මෙයට ළඟා නොවන බව අපි දනිමු . මම පික්සල් මිලියනයක් තෝරා ගත්තා. ඔබට පික්සල් මිලියනයකට වඩා උස අන්තර්ගතයකට සහාය වීමට අවශ්ය යැයි ඔබට හැඟේ නම්, 1) මට කණගාටුයි, සහ 2) ශුන්‍ය කිහිපයක් එක් කරන්න.
දෙවන ගැටළුව වන්නේ min-heightඅවම උස සංක්‍රාන්තිය සඳහා අප සැබවින්ම භාවිතා නොකිරීමට හේතුවයි . ඒ වෙනුවට, 50px සිට ශුන්‍යයට සංක්‍රමණය වන ::afterභාජනයක ව්යාජ මූලද්‍රව්‍යයක් ඇත height. මෙය සමාන බලපෑමක් ඇති කරයි min-height: එය දැනට පවතින ව්යාජ මූලද්රව්යයේ ඕනෑම උසකට වඩා බහාලුම් හැකිලීමට ඉඩ නොදේ. නමුත් අප භාවිතා කරන heightනිසා නොව min-height, max-heightසංක්‍රාන්තිය අවසන් වූ වහාම ව්යාජ මූලද්රව්යයේ සත්‍ය උස ශුන්‍යයට සැකසීමට (නැවත වරක් ප්‍රමාදයකින් යෙදිය හැකිය), අවම වශයෙන් සංක්‍රාන්තියෙන් පිටත වුවද කුඩා මූලද්‍රව්‍යයන් පවා ඇති බව සහතික කරයි. නිවැරදි උස. නිසා min-heightය ශක්තිමත් වඩා max-height, මේ අපි රුවනයකි ගේ භාවිතා නම් වැඩ නැහැ min-height, ඒ වෙනුවට, ව්යාජ-අංගයක් ගේheight. max-heightපෙර ඡේදයේ දී මෙන් , මෙය max-heightද සංක්‍රාන්තියේ ප්‍රතිවිරුද්ධ කෙළවර සඳහා අගයක් අවශ්ය වේ. නමුත් මේ අවස්ථාවේ දී අපට 50px තෝරා ගත හැකිය.
ක්‍රෝම් (වින්, මැක්, ඇන්ඩ්‍රොයිඩ්, අයිඑස්), ෆයර්ෆොක්ස් (වින්, මැක්, ඇන්ඩ්‍රොයිඩ්), එජ්, අයිඊ 11 (මා නිදොස්කරණයට කරදර නොකළ මගේ නිරූපණය සමඟ නම්‍යශීලි සැකැස්මක් හැර), සහ සෆාරි (මැක්, iOS ). නම්‍යශීලි කොටුව ගැන කතා කිරීම, කිසිදු නම්‍යශීලි පෙට්ටියක් භාවිතා නොකර මෙම කාර්යය කිරීමට හැකි විය යුතුය; ඇත්ත වශයෙන්ම මම හිතන්නේ ඔබට IE7 හි සෑම දෙයක්ම පාහේ ක්රියාත්මක කළ හැකිය - ඔබට CSS සංක්‍රාන්ති නොතිබීම හැර, එය අර්ථ විරහිත ව්‍යායාමයක් බවට පත් කරයි.
height:auto/max-heightවඩා වැඩි ඔබ ප්රදේශයේ ව්යාප්ත කරන්නේ නම්, විසඳුමක් පමණක් වැඩ කරනheightඔබ සීමා කරන්න ඕනේ. ඔබ සතුවmax-heightඇති300px, නමුත් ආපසු කළ හැකි combo කොටුව දක,50px, එසේ නම්max-heightඔබ, උදව් නැහැ50pxඅංග ගණන මත පදනම්ව විචල්ය වන අතර, ඔබ විසින් ඒ නිසා මම ඒක හදන්න නොහැකි කළ නොහැකි තත්වයට පැමිණීමට හැකිheightනොවේ ස්ථාවරයි,height:autoවිසඳුම, නමුත් මට මේ සමඟ සංක්‍රාන්ති භාවිතා කළ නොහැක.