Generatiivinen tiedustelu

CSS-ruudukon animointi (ohjeet + esimerkkejä)

Treffi:

Olen iloinen voidessani valaista sitä tosiasiaa, että CSS grid-template-rows ja grid-template-columns ominaisuudet ovat nyt animoitavissa kaikissa yleisimmissä verkkoselaimissa! No, CSS Grid on teknisesti tukenut animaatioita pitkään, sellaisena kuin se on paistettu suoraan CSS Grid Layout Module Level 1 -spesifikaatioon.

Mutta näiden ruudukon ominaisuuksien animointia tuettiin vasta äskettäin kaikissa kolmessa pääselaimessa. Katsotaanko muutamia esimerkkejä saadaksemme luovat mehut virrata?

Sisällysluettelo

Esimerkki 1: Sivupalkin laajentaminen

Ensinnäkin puhumme tästä:

Yksinkertainen kaksisarainen ruudukko. Nyt, ennen, saatat emme ovat rakentaneet tämän CSS-ruudukon avulla, koska animaatioita ja siirtymiä ei tuettu, mutta entä jos haluat, että vasen sarake – kenties sivupalkin navigointi – laajenee hiiri? No nyt se on mahdollista.

Tiedän mitä ajattelet: "Animoitaanko CSS-ominaisuus? Helppoa, olen tehnyt sitä vuosia!” Minä myös. Törmäsin kuitenkin mielenkiintoiseen pulmaan, kun kokeilin tiettyä käyttötapausta.

Joten haluamme siirtää itse ruudukon (erityisesti grid-template-columns, joka on asetettu .grid luokka esimerkissä). Mutta vasen sarake (.left) on valitsin, joka vaatii :hover pseudoluokka. Vaikka JavaScript voi ratkaista tämän ongelman helposti - kiitos, mutta ei kiitos - voimme suorittaa sen pelkällä CSS:llä.

Käydään läpi koko asia, alkaen HTML:stä. Melko tavallista tavaraa todella… ruudukko kahdella sarakkeella.

<div class="grid"> <div class="left"></div> <div class="right"></div>
</div>

Jos kosmeettinen CSS jätetään sivuun, sinun on ensin asetettava display: grid pääsäiliössä (.grid).

.grid { display: grid;
}

Seuraavaksi voimme määrittää ja mitoittaa kaksi saraketta käyttämällä grid-template-columns omaisuutta. Teemme vasemmasta sarakkeesta erittäin kapean ja lisäämme sen leveyttä myöhemmin hiiren osoitin. Oikea sarake vie loput jäljellä olevasta tilasta, kiitos auto avainsana.

.grid { display: grid; grid-template-columns: 48px auto;
}

Tiedämme, että aiomme animoida tämän asian, joten mennään eteenpäin ja heitetään a transition kun olemme siinä, joten tilojen välinen muutos on tasaista ja havaittavissa.

.grid { display: grid; grid-template-columns: 48px auto; transition: 300ms; /* Change as needed */
}

Siinä se sille .grid! Jäljelle jää vain hover-tilan käyttöönotto. Erityisesti aiomme ohittaa grid-template-columns -ominaisuutta niin, että vasen sarake vie enemmän tilaa hiirellä.

Tämä ei yksinään ole kovin mielenkiintoista, vaikka onkin mahtavaa, että animaatioita ja siirtymiä tuetaan nyt CSS Gridissä. Mielenkiintoisempaa on, että voimme käyttää suhteellisen uutta :has() pseudoluokka ylätason säilön tyyliin (.grid) kun lapsi (.left) on päällä.

.grid:has(.left:hover) { /* Hover styles */
}

Selvästi englanniksi tämä sanoo: "Tee jotain .grid kontti, jos se sisältää elementin nimeltä .left sen sisällä, joka on leijuvassa tilassa." Siksi :has() kutsutaan usein "vanhempien" valitsimeksi. Voimme vihdoin valita vanhemman sen sisältämien lasten perusteella – JavaScriptiä ei tarvita!

Joten suurennetaan leveyttä .left sarake kohtaan 30% kun sitä leijuu. The .right sarake vie edelleen kaiken jäljellä olevan tilan:

.grid { display: grid; transition: 300ms; grid-template-columns: 48px auto;
} .grid:has(.left:hover) { grid-template-columns: 30% auto;
}

Voisimme käyttää myös CSS-muuttujia, jotka saattavat näyttää selkeämmiltä henkilökohtaisista mieltymyksistäsi riippuen (tai saatat silti käyttää CSS-muuttujia projektissasi):

.grid { display: grid; transition: 300ms; grid-template-columns: var(--left, 48px) auto;
} .grid:has(.left:hover) { --left: 30%;
}

I rakkaus että CSS-ruudukot voidaan nyt animoida, mutta se, että voimme rakentaa tämän esimerkin vain yhdeksän rivin CSS:llä, on vielä hämmästyttävämpää.

Tässä toinen esimerkki Olivia Ng — samanlainen konsepti, mutta sisällöltään (napsauta navigointikuvaketta):

Esimerkki 2: Laajentuvat paneelit

Tämä esimerkki siirtää ruudukon säiliön (sarakkeiden leveydet) mutta myös yksittäiset sarakkeet (niiden taustavärit). Se on ihanteellinen tarjoamaan lisää sisältöä hiirellä.

Kannattaa muistaa, että ko repeat() toiminto tuottaa joskus bugisia siirtymiä, minkä vuoksi asetan jokaisen sarakkeen leveyden erikseen (esim grid-template-columns: 1fr 1fr 1fr).

Esimerkki 3: Rivien ja sarakkeiden lisääminen

Tämä esimerkki "lisää" animoidusti sarakkeen ruudukkoon. Kuitenkin - arvasit sen - tässä skenaariossa on myös sudenkuoppa. Edellytyksenä on, että "uusi" sarake ei saa olla piilotettu (eli asetettu display: none), ja CSS Grid -ruudukon on tunnustettava sen olemassaolo asettaessaan sen leveyden arvoon 0fr.

Joten kolmisarakkeiselle ruudukolle - grid-template-columns: 1fr 1fr 0fr (kyllä, yksikkö on ilmoitettava, vaikka arvo on 0!) siirtyy grid-template-columns: 1fr 1fr 1fr oikein, mutta grid-template-columns: 1fr 1fr ei. Jälkikäteen ajateltuna tämä on itse asiassa täysin järkevää ottaen huomioon, mitä tiedämme miten siirtymät toimivat.

Tässä toinen esimerkki Michelle Barker — sama konsepti, mutta ylimääräisellä sarakkeella ja erä lisää pizzaa. Varmista, että käytät tätä koko näytön tilassa, koska se on todella responsiivinen (ei huijausta, vain hyvä muotoilu!).

Muutama esimerkki lisää

Koska miksi ei?

Tämä "animoitu Mondrian" on alkuperäinen konseptitodiste animoiduille CSS-ruudukoille Chrome DevRel. grid-row's ja grid-column's käyttää span avainsanalla luodaksesi edessäsi näkyvän asettelun ja sitten grid-template-rowja grid-template-column's on animoitu CSS-animaatiolla. Se ei ole läheskään niin monimutkaista, miltä näyttää!

Sama konsepti, mutta enemmän Michelle Barkerin pizzaa. Voisiko tehdä mukavan lastauspyörän?

Päätellen hieman nostalgiaa (näen iäni tässä), ei kovin ruudullinen animoitu CSS-ruudukko Andrew Harvard. Jälleen - sama konsepti - se johtuu vain siitä, että et näe muita ruudukon kohteita. Mutta älä huoli, ne ovat siellä.

spot_img

Uusin älykkyys

spot_img

Keskustele kanssamme

Hei siellä! Kuinka voin olla avuksi?