Korkeuden siirto nollasta automaattiseen CSS:n avulla

Tasainen korkeussiirtymä 0:sta automaattiseen CSS:n avulla

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>

JavaScript-ratkaisu tasaiseen korkeuden siirtoon

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>

Tasainen korkeussiirto CSS-muuttujien avulla

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>

Usein kysyttyjä kysymyksiä CSS-siirtymistä ja animaatioista

1. Kuinka voin siirtää korkeuden 0:sta automaattiseen CSS:n avulla?
2. Tämän saavuttamiseksi voit käyttää kiinteän korkeuden ja JavaScript asettaaksesi korkeusarvon dynaamisesti. Puhtaat CSS-ratkaisut ovat rajallisia, koska height: auto ei ole suoraan animoitavissa.
3. Mitä eroa on siirtymillä ja animaatioilla CSS:ssä?
4. CSS-siirtymät tarjoavat tavan muuttaa ominaisuusarvoja sujuvasti (tietyn keston aikana) tilasta toiseen, tyypillisesti tilanvaihdoksen yhteydessä, kuten hover. CSS-animaatiot mahdollistavat monimutkaisempien sekvenssien käyttämisen avainkehysten avulla tilojen ja ajoituksen määrittämiseen.
5. Voinko käyttää CSS-siirtymiä elementeille, joilla on dynaaminen korkeus?
6. Kyllä, mutta sinun on yleensä laskettava korkeus etukäteen tai määritettävä korkeusarvo dynaamisesti JavaScriptin avulla sujuvan siirtymisen takaamiseksi.
7. Mikä on tarkoitus overflow: hidden; omaisuutta CSS-siirtymissä?
8. The overflow: hidden; ominaisuutta käytetään piilottamaan kaikki elementin rajat ylittävä sisältö, mikä on välttämätöntä puhtaille siirtymille, joihin liittyy korkeusmuutoksia.
9. Kuinka tehdä keyframes työskenteletkö CSS-animaatioiden parissa?
10. Keyframes CSS-animaatioissa voit määrittää elementin tilat animaation eri kohdissa. Voit määrittää ominaisuuksia ja niiden arvoja jokaisessa avainkehyksessä ja luoda monimutkaisia ​​animaatioita.
11. Voinko yhdistää CSS-siirtymiä ja animaatioita?
12. Kyllä, CSS-siirtymien ja animaatioiden yhdistäminen voi tarjota rikkaamman käyttökokemuksen käsittelemällä sekä tilamuutoksia että jatkuvia animaatioita.
13. Mikä on scrollHeight JavaScriptissä?
14. scrollHeight palauttaa elementin kokonaiskorkeuden, mukaan lukien sisällön, joka ei näy näytöllä ylivuodon vuoksi. Se on hyödyllinen dynaamisten korkeuksien laskemiseen sulavia siirtymiä varten.
15. Kuinka animation-delay tehdä työtä?
16. The animation-delay ominaisuus määrittää, milloin animaation tulee alkaa. Sen avulla voit järjestellä useita animaatioita kerrostetun tehosteen saamiseksi.
17. Miksi on :root käytetään CSS:ssä?
18. The :root pseudo-luokka kohdistaa asiakirjan juurielementtiin. Sitä käytetään yleisesti määrittämään globaaleja CSS-muuttujia, joita voidaan käyttää uudelleen koko tyylitaulukossa.

Viimeisiä ajatuksia tasaisista korkeuden siirtymistä

Sujuvien siirtymien saavuttaminen korkeudesta 0 automaattiseen CSS:ssä edellyttää tekniikoiden yhdistelmää. Vaikka puhdas CSS tarjoaa yksinkertaisuutta, sitä rajoittaa ennalta määritettyjen korkeuksien tarve. Integroimalla JavaScriptin voit dynaamisesti laskea ja asettaa korkeuksia, mikä tarjoaa saumattoman siirtymän. CSS-muuttujien käyttö voi myös tarjota joustavan lähestymistavan dynaamisten arvojen hallintaan. Näiden menetelmien yhdistäminen antaa kehittäjille mahdollisuuden luoda interaktiivisempia ja mukaansatempaavampia verkkokokemuksia ilman korkeusmuutoksiin tyypillisesti liittyviä äkillisiä muutoksia.