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.

Kommando	Beskrivelse
overflow: hidden;	Skjuler alt innhold som flyter over utenfor elementets boks. Brukes til å administrere innholdssynlighet under høydeoverganger.
transition: height 1s ease;	Bruker en jevn overgangseffekt på høydeegenskapen i løpet av 1 sekund ved å bruke ease timing-funksjonen.
scrollHeight	Returnerer hele høyden til et element, inkludert overløpsinnhold som ikke er synlig. Brukes i JavaScript for å beregne dynamiske høyder.
addEventListener('mouseenter')	Fester en hendelsesbehandler til 'mouseenter'-hendelsen, som utløses når musepekeren går inn i elementet. Brukes til å starte høydeovergangen.
addEventListener('mouseleave')	Fester en hendelsesbehandler til 'mouseleave'-hendelsen, som utløses når musepekeren forlater elementet. Brukes til å snu høydeovergangen.
style.height	Angir direkte høyden på et element i JavaScript. Brukes til dynamisk å justere høyden for jevne overganger.
:root	CSS-pseudo-klasse som samsvarer med dokumentets rotelement. Brukes til å definere globale CSS-variabler.
var(--max-height)	Refererer til en CSS-variabel. Brukes til dynamisk å tilordne maksimal høyde under overganger.

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 eiendom, er alt innhold som strekker seg utover elementets høyde skjult, noe som sikrer en ren overgang. De 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 og setter denne verdien til 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 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 for maksimal høyde kan vi dynamisk tilordne denne verdien til underordnet element under svevetilstanden. Variabelen 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.

1. Hvordan kan jeg bytte høyde fra 0 til automatisk ved hjelp av CSS?
2. For å oppnå dette kan du bruke en kombinasjon av fast høyde og for å stille inn høydeverdien dynamisk. Rene CSS-løsninger er begrenset pga er ikke direkte animerbar.
3. Hva er forskjellen mellom overganger og animasjoner i CSS?
4. CSS-overganger gir en måte å endre egenskapsverdier jevnt (over en gitt varighet) fra en tilstand til en annen, vanligvis ved en tilstandsendring som hover. CSS-animasjoner tillater mer komplekse sekvenser ved å bruke nøkkelbilder for å definere tilstander og timing.
5. Kan jeg bruke CSS-overganger for elementer med dynamisk høyde?
6. Ja, men du må vanligvis beregne høyden på forhånd eller bruke JavaScript for å dynamisk angi høydeverdien for en jevn overgang.
7. Hva er hensikten med eiendom i CSS-overganger?
8. De egenskapen brukes til å skjule innhold som overskrider grensene til elementet, noe som er avgjørende for rene overganger som involverer høydeendringer.
9. Hvordan gjøre jobber med CSS-animasjoner?
10. i CSS lar animasjoner deg definere tilstandene til et element på forskjellige punkter under animasjonen. Du kan spesifisere egenskaper og deres verdier ved hvert nøkkelbilde, og skape komplekse animasjoner.
11. Kan jeg kombinere CSS-overganger og animasjoner?
12. Ja, å kombinere CSS-overganger og animasjoner kan gi en rikere brukeropplevelse ved å håndtere både tilstandsendringer og kontinuerlige animasjoner.
13. Hva er i JavaScript?
14. returnerer den totale høyden til et element, inkludert innhold som ikke er synlig på skjermen på grunn av overløp. Det er nyttig for å beregne dynamiske høyder for jevne overganger.
15. Hvordan gjør arbeid?
16. De egenskapen angir når en animasjon skal starte. Den lar deg sekvensere flere animasjoner for en lagdelt effekt.
17. Hvorfor er brukes i CSS?
18. De pseudo-klasse retter seg mot dokumentets rotelement. Det brukes ofte til å definere globale CSS-variabler som kan gjenbrukes i hele stilarket.

Å oppnå jevne overganger fra høyde 0 til auto i CSS krever en kombinasjon av teknikker. Mens ren CSS tilbyr enkelhet, er den begrenset av behovet for forhåndsdefinerte høyder. Ved å integrere JavaScript kan du dynamisk beregne og stille inn høyder, noe som gir en sømløs overgang. Bruk av CSS-variabler kan også tilby en fleksibel tilnærming til å administrere dynamiske verdier. Ved å kombinere disse metodene kan utviklere skape mer interaktive og engasjerende nettopplevelser uten de brå endringene som vanligvis er forbundet med høydeoverganger.