Näita sildipilve

CSS transition ja Auto height

CSS3 transitions and Auto Height issue solved

Kirjutas ,

Kes vähegi on tutvunud CSS transitionidega (CSS üleminekutega), on kokku puutunud automaatse kõrguse probleemiga (height: auto;). Mida see tähendab? Lubage seletada.

Veebis on üldlevinud selline UI-komponent, millele on määratud nn kinni-lahti käitumine. Kuskil on nupp, mis avab menüü ja kui sellele uuesti vajutada, siis see suletakse. Kui jätta kõrvale nn click sündmus, mis selle käitumise esile kutsub, siis selle efekti enda loomiseks on olnud pikka aega kaks võimalust: a) kui tehakse klõps, siis kuvatakse tervet menüüd silmapilkselt; b) kui tehakse klõps, siis kuvatakse tervet menüüd viivitusega, ehk selle nähtavale tulemine on mingi efektiga, mis on valmistatud Javascripti abil. Enimlevinud efektiks on muidugi nn slidedown-slideup efekt, kus siis sündmuse esinemisel rullitakse menüü kas lahti või kinni.

CSS on muutnud mängureegleid. Efektide loomiseks, mida väga pikka aega on suudetud tekitada vaid Javascripti abil, piisab nüüd vaid CSS-ist. Võimalust väärtuseid sujuvalt muuta A-st B-ks nimetatakse CSS transition-iks. Meile on antud võimalus määrata, kui kaua ühe või teise väärtuse muutus aega võtab. Selle kohta saab täpsemat infot näiteks lehelt CSS Transitions. Tegemist on suurepärase leiutisega, mis on muutnud veebilehtedele erinevate efektide loomise imelihtsaks. Arendaja ei pea välja mõtlema erinevaid algoritme efektide loomiseks, seda pakub CSS3 väga lihtsa süntaksina, mida suudab igaüks õppida ja rakendada. Muidugi sellel on vaid üks konks — kõik veebilehitsejad seda veel ei toeta. Suurem osa aga küll.

Auto height probleem

Lahti rullumise efekti tehakse enamasti nii, et algselt on sektsiooni kõrgus 0. Lahti rullimisel antakse sektsioonile kõrgus “auto”. See ütleb veebilehitsejale, et muuda sektsioon just nii kõrgeks kui vaja. See kõik toimub siis silmapilkselt, ei mingit efekti. Aga selle sujuvaks rullimiseks tuleb kirjutada Javascript, mis mingi intervalli järel suurendab väärtust seni kuni kogu sektsiooni sisu saab nähtavaks. Sellise skripti kirjutamine pole muidugi keeruline. Küll aga võib keeruliseks minna siis, kui pole teada sektsiooni tegelikku kõrgust ja kui näiteks on soov rakendada mõnda ajafunktsiooni (timing functions). Just sellises olukorras tuleb appi CSS transitions.

Aga sellega on see probleem, et “auto” väärtustega ei oska see midagi peale hakata. Ehk animatsiooni ei toimu. Mida teha?

Lahendus sündis ühe projekti raames, kus just seda rullimist ja just ilma Javascriptita oli vaja. Eksperimenteerides erinevate võimalustega leidsin, et minu jaoks töötas CSS max-height atribuudi kasutamine. Loobusin nn height: 0; ja height: auto kasutamisest ja läksin max-height: 0; ja max-height: 2000px üle.

Toon näite

Alljärgnevas näites on olukord, kus algselt on sektsiooni kõrguseks määratud max-height: 0;. Kui toimub nn click sündmus, siis antakse sektsioonile CSS klass “open”, millele on määratud omaduseks max-height: 2000px. See “2000px” on hetkel suvaline väärtus. Oluline on vaid selle juures see, et see väärtus võiks olla midagi sellist, milleni sektsioon kunagi ei jõua. St et näites eeldatakse, et sektsiooni kõrgus ei ületa 2000 pikslit.

.box {
  max-height: 0;
  -webkit-transition: all .8s;
  -moz-transition: all .8s;
  transition: all .8s;
  overflow: hidden;
}
.box.open {
  max-height: 2000px;
}

Eksperimenteerida saab ka siin http://jsfiddle.net/BvKvZ/2/

Oled leidnud, et see pole siiski lahendus? Jaga oma kogemust!