Overganger høyde fra 0 til automatisk ved hjelp av CSS

Opprette jevne høydeoverganger med CSS

Å overføre høyden på et element fra 0 til auto ved hjelp av CSS kan være utfordrende på grunn av mangelen på et definert endepunkt for autoverdien. Dette fører ofte til at elementer brått dukker opp uten en jevn overgangseffekt.

I denne artikkelen vil vi utforske hvordan du oppnår en jevn nedtrekkseffekt for en element ved hjelp av CSS-overganger. Vi vil undersøke vanlige problemer og tilby løsninger for å skape en sømløs overgang uten å stole på JavaScript.

Forstå jevne høydeoverganger i CSS

Det første skriptet demonstrerer en CSS-bare tilnærming til å overføre høyden til et element fra 0 til en spesifisert høyde. Ved å bruke overflow: hidden; eiendom, er alt innhold som strekker seg utover elementets høyde skjult, noe som sikrer en ren overgang. De transition: height 1s ease; egenskapen bruker en jevn overgangseffekt på høyden over 1 sekund. Når det overordnede elementet holdes over, endres høyden til det underordnede elementet til en forhåndsbestemt verdi, og skaper en illusjon av å skli ned. Denne metoden krever imidlertid at du kjenner den endelige høyden på elementet på forhånd.

Det andre skriptet inkorporerer JavaScript for å dynamisk justere høyden på et element. Når det overordnede elementet holdes over, beregner skriptet hele høyden på innholdet ved hjelp av scrollHeight og setter denne verdien til style.height egenskapen til underelementet. Dette sikrer en jevn overgang fra høyde 0 til full innholdshøyde uten å vite den endelige høyden på forhånd. De addEventListener('mouseenter') og addEventListener('mouseleave') funksjoner brukes til å håndtere hendelser for musepeker, og sikrer at høyden går tilbake til 0 når musen forlater det overordnede elementet.

Avanserte teknikker for CSS-høydeoverganger

Det tredje skriptet utnytter CSS-variabler for å administrere høydeoverganger. Ved å definere en global variabel :root for maksimal høyde kan vi dynamisk tilordne denne verdien til underordnet element under svevetilstanden. Variabelen var(--max-height) brukes i CSS for å stille inn høyden, for å sikre at overgangen er jevn og tilpasses endringer i innhold. Denne tilnærmingen kombinerer enkelheten til CSS med fleksibiliteten til dynamiske verdier, noe som gjør det enklere å administrere og oppdatere overgangshøydene etter behov.

Hver av disse metodene tilbyr en annen løsning på problemet med å overføre et elements høyde fra 0 til auto. Den rene CSS-tilnærmingen er enkel, men begrenset av behovet for en forhåndsdefinert høyde. JavaScript-metoden gir mer fleksibilitet, tillater dynamiske høydeberegninger, men krever ekstra skripting. CSS-variableteknikken tilbyr en mellomting, og kombinerer brukervennlighet med dynamiske evner. Ved å forstå og bruke disse teknikkene kan utviklere lage jevne, visuelt tiltalende høydeoverganger i nettprosjektene deres.

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

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

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

Utforsker CSS-animasjoner for jevne overganger

I tillegg til overgangshøyde gir CSS-animasjoner en allsidig måte å lage jevne visuelle effekter på. CSS-animasjoner lar deg animere et bredt spekter av egenskaper utover høyden, inkludert opasitet, transformasjon og farger. Ved å definere nøkkelbilder kan du kontrollere de mellomliggende trinnene i en animasjon, noe som resulterer i mer komplekse og visuelt tiltalende overganger. Du kan for eksempel kombinere en høydeovergang med en inntoningseffekt for å skape en mer dynamisk og engasjerende brukeropplevelse. Keyframes-regelen i CSS lar deg spesifisere start- og slutttilstander for en animasjon, samt et hvilket som helst antall mellomtilstander, noe som gir deg finmasket kontroll over animasjonsprosessen.

Et annet aspekt ved CSS-animasjoner er muligheten til å sekvensere flere animasjoner ved å bruke egenskapen animasjon-forsinkelse. Denne egenskapen lar deg forskyve starttidene for forskjellige animasjoner, og skaper en lagdelt effekt. Du kan for eksempel ha et elements høydeovergang først, etterfulgt av en fargeendring og deretter en transformasjonsrotasjon. Ved å orkestrere disse animasjonene nøye, kan du lage sofistikerte og polerte brukergrensesnitt. I tillegg kan CSS-animasjoner kombineres med CSS-overganger for å håndtere både diskrete og kontinuerlige tilstandsendringer, og tilbyr et omfattende verktøysett for å lage interaktive nettopplevelser.