Kõrguse üleminek nullist automaatsele CSS-i abil

Sujuv kõrguse üleminek nullist automaatsele CSS-i abil

CSS ja HTML

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: 100px; /* Set this to the max height you expect */
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

JavaScripti lahendus sujuvaks kõrguse üleminekuks

HTML, CSS ja JavaScript

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>
<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  parent.addEventListener('mouseenter', () => {
    child.style.height = child.scrollHeight + 'px';
  });
  parent.addEventListener('mouseleave', () => {
    child.style.height = '0';
  });
</script>

Sujuv kõrguse üleminek CSS-i muutujate abil

CSS ja HTML

<style>
  :root {
    --max-height: 100px;
  }
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: var(--max-height);
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

Korduma kippuvad küsimused CSS-i üleminekute ja animatsioonide kohta

1. Kuidas saan CSS-i abil kõrgust nullist automaatsele üle viia?
2. Selle saavutamiseks võite kasutada kombinatsiooni fikseeritud kõrgusest ja JavaScript kõrguse väärtuse dünaamiliseks määramiseks. Puhtad CSS-i lahendused on piiratud, kuna height: auto ei ole otseselt animeeritav.
3. Mis vahe on üleminekutel ja animatsioonidel CSS-is?
4. CSS-i üleminekud võimaldavad atribuutide väärtusi sujuvalt (antud kestuse jooksul) ühest olekust teise muuta, tavaliselt olekumuutuse korral, näiteks hõljutades. CSS-animatsioonid võimaldavad olekute ja ajastuse määratlemiseks võtmekaadreid kasutades keerukamaid jadasid.
5. Kas ma saan kasutada CSS-i üleminekuid dünaamilise kõrgusega elementide jaoks?
6. Jah, kuid tavaliselt peate kõrguse eelnevalt arvutama või kasutama JavaScripti, et sujuva ülemineku jaoks kõrguse väärtus dünaamiliselt määrata.
7. Mis on eesmärk overflow: hidden; omadus CSS-i üleminekutes?
8. The overflow: hidden; atribuuti kasutatakse elemendi piire ületava sisu peitmiseks, mis on oluline puhaste üleminekute jaoks, mis hõlmavad kõrguse muutusi.
9. Kuidas keyframes Kas töötate CSS-animatsioonidega?
10. Keyframes CSS-animatsioonides võimaldab teil määratleda elemendi olekuid animatsiooni erinevates punktides. Saate määrata atribuudid ja nende väärtused iga võtmekaadri juures, luues keerukaid animatsioone.
11. Kas ma saan kombineerida CSS-i üleminekuid ja animatsioone?
12. Jah, CSS-i üleminekute ja animatsioonide kombineerimine võib pakkuda rikkalikumat kasutuskogemust, käsitledes nii olekumuutusi kui ka pidevaid animatsioone.
13. Mis on scrollHeight JavaScriptis?
14. scrollHeight tagastab elemendi kogukõrguse, sealhulgas sisu, mis ei ole ülevoolu tõttu ekraanil nähtav. See on kasulik sujuvate üleminekute dünaamiliste kõrguste arvutamiseks.
15. Kuidas animation-delay töötada?
16. The animation-delay atribuut määrab, millal animatsioon peaks algama. See võimaldab kihilise efekti saavutamiseks järjestada mitu animatsiooni.
17. Miks on :root kasutatakse CSS-is?
18. The :root pseudoklass sihib dokumendi juurelementi. Seda kasutatakse tavaliselt globaalsete CSS-muutujate määratlemiseks, mida saab laaditabeli ulatuses uuesti kasutada.

Viimased mõtted sujuvate kõrguste üleminekute kohta

Sujuvate üleminekute saavutamiseks kõrguselt 0 automaatsele CSS-is on vaja tehnikate kombinatsiooni. Kuigi puhas CSS pakub lihtsust, piirab seda vajadus eelnevalt määratletud kõrguste järele. JavaScripti integreerimisega saate dünaamiliselt arvutada ja määrata kõrgusi, pakkudes sujuvat üleminekut. CSS-i muutujate kasutamine võib pakkuda ka paindlikku lähenemisviisi dünaamiliste väärtuste haldamiseks. Nende meetodite kombineerimine võimaldab arendajatel luua interaktiivsemaid ja kaasahaaravamaid veebikogemusi ilma järskude muutusteta, mida tavaliselt seostatakse kõrguse üleminekuga.