Ebben a kézikönyvben megtanuljuk, hogyan kell megjeleníteni és elrejteni a div elemet a „ átmenet ” a CSS tulajdona.
Hogyan lehet megjeleníteni és elrejteni egy divet az átmenettel a CSS-ben?
A CSS' átmenet ” tulajdonság megkönnyíti az ingatlan értékének egy adott időszak alapján történő megváltoztatását. Állapotától függően lehet lebegő vagy aktív elem. Ezenkívül a CSS átmeneti tulajdonsága a div megjelenítésére és elrejtésére szolgál HTML-ben.
Most térjünk át az átmeneti tulajdonság szintaxisára.
Szintaxis
Két dolgot kell megadnia az átmeneti effektus létrehozásakor:
Alapvetően ' átmenet ” egy rövidített tulajdonság, amely négy másik tulajdonságból áll, amelyeket alább adunk meg:
átmenet : átmenet-tulajdonság átmeneti-időtartamátmeneti időzítés funkció átmeneti késleltetés
Itt található az említett tulajdonságok leírása:
- átmeneti tulajdonság: Bármely CSS-tulajdonra való áttérés beállítására szolgál. Ilyen például a szélesség, magasság, átlátszatlanság és még sok más.
- átmeneti időtartam: Az átmenet időtartamának megadására szolgál.
- átmeneti időzítés funkció: Az átmenet sebességének beállítására szolgál.
- átmeneti késleltetés: Meghatározza az átmenet megkezdésének vagy késleltetésének időpontját.
Vegyünk egy példát, amelyben megmutatjuk és elrejtjük a div-t a „ átmenet ” a CSS tulajdona. Ebből a célból először létrehozunk egy „ div ' és egy beviteli típus ' jelölőnégyzetet ”.
1. lépés: Hozzon létre és stílusos Div
A
HTML
>
A továbbiakban a div stílusát a background-color tulajdonság használatával fogjuk kialakítani, és a háttér színét a következőképpen állítjuk be: rgb(238; 190; 118) ”. A div magasságát a következőképpen állítjuk be 150 képpont ” és állítsa be a szegélyt körülötte a „ 10 képpont ”, „ gerinc ”, és „ rgb(6; 56; 2) ”. A végén a betűméretet a következőképpen adjuk meg 50 képpont ”.
CSS
div {háttérszín : rgb ( 238 , 190 , 118 ) ;
magasság : 150 képpont ;
határ : 10 képpont gerinc rgb ( 6 , 56 , két ) ;
betűméret : 50 képpont ;
}
A fent leírt kód kimenete alább látható. Itt láthatja, hogy a div és a jelölőnégyzet sikeresen létrejött:
Most lépjen a következő lépésre, amelyben elrejtjük és megjelenítjük a div-t az átmeneti tulajdonság segítségével.
2. lépés: Mutassa meg és rejtse el az átmenetet tartalmazó Div-t
Ehhez beállítjuk az átmeneti hatást a ' átlátszatlanság ', időtartama: ' 2s ”, az átlátszatlanság értéke pedig „ 0 ” a CSS-ben létrehozott div osztályban:
átmenet : átlátszatlanság 2s ;átlátszatlanság : 0 ;
Jegyzet: Az átállást a „ átlátszatlanság ” tulajdonság az elem átlátszóságának beállításához. Itt az értékét a következőképpen adjuk meg 0 ”, ami azt jelenti, hogy amikor az átmenet elindul, a div két másodpercig rejtve lesz.
Az átmeneti értékek beállítása után a „ bemenet ” a HTML fájlban létrehozott bemeneti típus eléréséhez és a bemeneti elem pszeudoosztályának beállításához „ :ellenőrizve ”. Ezután elérjük a létrehozott div-t, és a „ + ” operátort használjuk a jelölőnégyzet és a div társítására. Így amikor egy műveletet végrehajtanak a jelölőnégyzeten, annak használata hatással lesz a div-re. Ezután az átlátszatlanság értékét a következőképpen állítjuk be: 1 ”:
bemenet : ellenőrizve + div {átlátszatlanság : 1
}
Jegyzet: Az átlátszatlanság értékét a következőképpen adjuk meg 1 ”, ami azt jelenti, hogy a jelölőnégyzet bejelölése után a létrehozott div jelenik meg. Ezenkívül törölje a jelölést a div elrejtéséhez
Amint láthatja, a div a „ átmenet ' ingatlan és ' :ellenőrizve ” pszeudoosztály elem:
Elmagyaráztuk az átmeneti tulajdonságú div elrejtésének és megjelenítésének módszerét a CSS-ben.
Következtetés
A div megjelenítéséhez és elrejtéséhez a „ átmenet ' ingatlan és ' :ellenőrizve ” pszeudoosztály elemet úgy használunk, hogy a div átlátszatlanság értéke „ 0 ”, és a :checked pszeudoosztály elemben állítsa be az átlátszatlanságot a következőre 1 ”. Amikor a felhasználó rákattint a jelölőnégyzetre, megjelenik a div, és ha nincs bejelölve, a div elrejti. Ebben a kézikönyvben leírtuk a div elrejtésének és megjelenítésének módszerét az átmeneti tulajdonság használatával.