Sa manwal na ito, matututunan natin ang pamamaraan upang ipakita at itago ang div gamit ang ' paglipat ” pag-aari ng CSS.
Paano Ipakita at Itago ang isang Div na may Transition sa CSS?
Ang CSS ' paglipat ” pinapadali ng property na baguhin ang value ng property batay sa isang partikular na panahon. Maaari itong maging isang lumulutang o aktibong elemento, depende sa estado nito. Bukod dito, ang transition property ng CSS ay ginagamit upang ipakita at itago ang div sa HTML.
Ngayon, lumipat tayo sa syntax ng transition property.
Syntax
Mayroong dalawang bagay na kailangan mong tukuyin kapag gumagawa ng transition effect:
Talaga, ' paglipat ” ay isang shorthand property na binubuo ng apat na iba pang property, na ibinibigay sa ibaba:
paglipat : transition-property transition-durationtransition-timing-function transition-delay
Narito ang paglalarawan ng mga nabanggit na katangian:
- transition-property: Ito ay ginagamit upang itakda ang paglipat sa anumang CSS property. Gaya ng lapad, taas, opacity, at marami pang iba.
- tagal ng paglipat: Ito ay ginagamit upang tukuyin ang tagal ng paglipat.
- function ng transition-timing: Ito ay ginagamit upang itakda ang bilis ng paglipat.
- pagkaantala sa paglipat: Tinutukoy nito ang oras kung kailan magsisimula o maantala ang paglipat.
Kumuha tayo ng isang halimbawa kung saan ipapakita at itatago natin ang div na may ' paglipat ” pag-aari ng CSS. Para sa layuning ito, una, lumikha kami ng ' div 'at isang uri ng input' checkbox ”.
Hakbang 1: Gumawa at Mag-istilo ng Div
Sa loob ng tag na
HTML
>
Pagkatapos nito, i-istilo namin ang div sa pamamagitan ng paggamit ng background-color property at itakda ang kulay ng background bilang “ rgb(238, 190, 118) ”. Itatakda namin ang taas ng div bilang ' 150px ” at ayusin ang hangganan sa paligid nito bilang “ 10px ”, “ tagaytay ”, at “ rgb(6, 56, 2) ”. Sa huli, tutukuyin namin ang laki ng font bilang “ 50px ”.
CSS
div {kulay ng background : rgb ( 238 , 190 , 118 ) ;
taas : 150px ;
hangganan : 10px tagaytay rgb ( 6 , 56 , dalawa ) ;
laki ng font : 50px ;
}
Ang output ng inilarawan sa itaas na code ay ibinigay sa ibaba. Dito, makikita mo na matagumpay na nalikha ang div at checkbox:
Ngayon, lumipat sa susunod na hakbang kung saan namin itinatago at ipinapakita ang div gamit ang transition property.
Hakbang 2: Ipakita at Itago ang isang Div na May Transition
Upang gawin ito, itatakda namin ang epekto ng paglipat sa pamamagitan ng pagtatakda ng ' opacity ”, ang tagal nito bilang “ 2s ”, at ang halaga ng opacity bilang “ 0 ” sa div class na ginawa namin sa CSS:
paglipat : opacity 2s ;opacity : 0 ;
Tandaan: Ilalapat namin ang paglipat sa ' opacity ” property upang itakda ang transparency ng elemento. Dito, tutukuyin natin ang halaga nito bilang ' 0 ”, na nangangahulugang kapag nagsimula ang paglipat, ang div ay itatago sa loob ng dalawang segundo.
Pagkatapos itakda ang mga halaga ng paglipat, gagamitin namin ang ' input ” para ma-access ang uri ng input na ginawa sa HTML file at itakda ang pseudo-class ng input element bilang “ : sinuri ”. Pagkatapos, maa-access natin ang ginawang div, at ang ' + Gagamitin ang operator para iugnay ang checkbox sa div. Kaya, kapag ang isang operasyon ay ginawa sa checkbox, ang paggamit nito ay makakaapekto sa div. Susunod, itatakda namin ang halaga ng opacity bilang ' 1 ”:
input : sinuri + div {opacity : 1
}
Tandaan: Tutukuyin namin ang halaga ng opacity bilang ' 1 ”, na nangangahulugan na kapag minarkahan ang checkbox, ipapakita ang ginawang div. Bukod dito, alisan ng marka ito upang itago ang div
Tulad ng nakikita mo, ang div ay ipinapakita at nakatago gamit ang ' paglipat ' ari-arian at ' : sinuri ” pseudo-class na elemento:
Ipinaliwanag namin ang paraan upang itago at ipakita ang isang div na may transition property sa CSS.
Konklusyon
Upang ipakita at itago ang isang div, ang ' paglipat ' ari-arian at ' : sinuri 'Ang pseudo-class na elemento ay ginagamit sa paraang ang halaga ng div opacity ay itinakda bilang ' 0 ”, at sa :checked pseudo-class na elemento, itakda ang opacity bilang “ 1 ”. Kapag nag-click ang user sa checkbox, ipapakita ang div, at kapag hindi ito na-check, itatago ang div. Sa manual na ito, inilarawan namin ang paraan upang itago at ipakita ang div sa pamamagitan ng paggamit ng transition property.