Aukštis iš 0 į automatinį, naudojant CSS

Sklandus aukščio perėjimas iš 0 į automatinį naudojant CSS

CSS ir 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>

„JavaScript“ sprendimas sklandžiam aukščio perėjimui

HTML, CSS ir 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>

Sklandus aukščio perėjimas naudojant CSS kintamuosius

CSS ir 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>

Dažnai užduodami klausimai apie CSS perėjimus ir animacijas

1. Kaip galiu perjungti aukštį iš 0 į automatinį naudojant CSS?
2. Norėdami tai pasiekti, galite naudoti fiksuoto aukščio ir JavaScript dinamiškai nustatyti aukščio reikšmę. Gryni CSS sprendimai yra riboti, nes height: auto nėra tiesiogiai animuojamas.
3. Kuo skiriasi perėjimai ir animacijos CSS?
4. CSS perėjimai suteikia galimybę sklandžiai (per tam tikrą trukmę) keisti nuosavybės vertes iš vienos būsenos į kitą, paprastai keičiant būseną, pavyzdžiui, užvedus pelės žymeklį. CSS animacija leidžia atlikti sudėtingesnes sekas, naudojant pagrindinius kadrus, kad būtų galima apibrėžti būsenas ir laiką.
5. Ar galiu naudoti CSS perėjimus dinaminio aukščio elementams?
6. Taip, bet paprastai reikia iš anksto apskaičiuoti aukštį arba naudoti JavaScript, kad dinamiškai nustatytumėte aukščio reikšmę, kad perėjimas būtų sklandus.
7. Koks yra tikslas overflow: hidden; nuosavybė CSS perėjimuose?
8. The overflow: hidden; ypatybė naudojama paslėpti bet kokį turinį, kuris viršija elemento ribas, o tai būtina norint atlikti švarius perėjimus, susijusius su aukščio pokyčiais.
9. Kaip daryti keyframes dirbti su CSS animacijomis?
10. Keyframes CSS animacijose leidžia apibrėžti elemento būsenas įvairiuose animacijos taškuose. Kiekviename pagrindiniame kadre galite nurodyti ypatybes ir jų reikšmes, kurdami sudėtingas animacijas.
11. Ar galiu derinti CSS perėjimus ir animacijas?
12. Taip, derinant CSS perėjimus ir animacijas, naudotojams gali būti suteikiama geresnė patirtis, tvarkant būsenos pokyčius ir nuolatines animacijas.
13. Kas yra scrollHeight „JavaScript“?
14. scrollHeight grąžina bendrą elemento aukštį, įskaitant turinį, kuris nematomas ekrane dėl perpildymo. Tai naudinga skaičiuojant dinaminius aukščius, kad būtų galima sklandžiai pereiti.
15. Kaip animation-delay dirbti?
16. The animation-delay ypatybė nurodo, kada turi prasidėti animacija. Tai leidžia jums sekti kelias animacijas, kad gautumėte daugiasluoksnį efektą.
17. Kodėl :root naudojamas CSS?
18. The :root pseudoklasė nukreipta į pagrindinį dokumento elementą. Jis dažniausiai naudojamas apibrėžti visuotinius CSS kintamuosius, kurie gali būti pakartotinai naudojami visame stiliaus lape.

Paskutinės mintys apie sklandų aukščio perėjimą

Norint pasiekti sklandų perėjimą iš 0 aukščio į automatinį CSS, reikia kelių metodų. Nors grynas CSS siūlo paprastumą, jį riboja iš anksto nustatytų aukščių poreikis. Integruodami „JavaScript“ galite dinamiškai apskaičiuoti ir nustatyti aukščius, užtikrindami sklandų perėjimą. Naudojant CSS kintamuosius taip pat galima lanksčiai valdyti dinamines reikšmes. Derinant šiuos metodus kūrėjai gali sukurti interaktyvesnę ir patrauklesnę žiniatinklio patirtį be staigių pokyčių, paprastai susijusių su aukščio perėjimais.