Tässä oppaassa opimme toimenpiteen div:n näyttämiseksi ja piilottamiseksi ' siirtyminen ” CSS:n omaisuutta.
Kuinka näyttää ja piilottaa Div-siirtymä CSS:ssä?
CSS' siirtyminen ” kiinteistön avulla on helppo muuttaa kiinteistön arvoa tietyn ajanjakson mukaan. Se voi olla kelluva tai aktiivinen elementti tilastaan riippuen. Lisäksi CSS:n siirtymäominaisuutta käytetään div-osion näyttämiseen ja piilottamiseen HTML:ssä.
Siirrytään nyt siirtymäominaisuuden syntaksiin.
Syntaksi
Sinun on määritettävä kaksi asiaa, kun luot siirtymätehosteen:
Periaatteessa ' siirtyminen ” on lyhennelmäominaisuus, joka koostuu neljästä muusta ominaisuudesta, jotka on annettu alla:
siirtyminen : siirtymäominaisuus siirtymäaikasiirtymä-ajoitus-toiminto siirtymäviive
Tässä on kuvaus mainituista kiinteistöistä:
- siirtymäominaisuus: Sitä käytetään asettamaan siirtyminen mihin tahansa CSS-ominaisuuteen. Kuten leveys, korkeus, peittävyys ja monet muut.
- siirtymäaika: Sitä käytetään määrittämään siirtymän kesto.
- siirtymäajan toiminto: Sitä käytetään siirtymän nopeuden asettamiseen.
- siirtymäviive: Se määrittää ajan, jolloin siirto alkaa tai viivästyy.
Otetaan esimerkki, jossa näytämme ja piilotamme div:n ' siirtyminen ” CSS:n omaisuutta. Tätä tarkoitusta varten luomme ensin ' div ' ja syöttötyyppi ' valintaruutu ”.
Vaihe 1: Luo ja muotoile Div
Lisäämme
HTML
>
Tämän jälkeen muotoilemme div:n käyttämällä background-color -ominaisuutta ja asetamme taustan väriksi ' rgb(238; 190; 118) ”. Asetamme div:n korkeudeksi ' 150 pikseliä ' ja säädä sen ympärillä oleva reunus ' 10px ”, “ harjanne ”, ja ” rgb(6, 56, 2) ”. Lopuksi määritämme fontin koon muodossa ' 50 pikseliä ”.
CSS
div {taustaväri : rgb ( 238 , 190 , 118 ) ;
korkeus : 150 pikseliä ;
rajaa : 10px harjanne rgb ( 6 , 56 , kaksi ) ;
Fonttikoko : 50 pikseliä ;
}
Yllä kuvatun koodin tulos on annettu alla. Täällä voit nähdä, että div ja valintaruutu on luotu onnistuneesti:
Siirry nyt seuraavaan vaiheeseen, jossa piilotamme ja näytämme div käyttämällä siirtymäominaisuutta.
Vaihe 2: Näytä ja piilota Div with Transition
Tätä varten asetamme siirtymätehosteen asettamalla ' opasiteetti ', sen kesto on ' 2s ja läpinäkyvyyden arvo muodossa ' 0 ” Div-luokassa, jonka loimme CSS:ssä:
siirtyminen : opasiteetti 2s ;opasiteetti : 0 ;
merkintä: Sovellamme siirtymää ' opasiteetti ” -ominaisuutta elementin läpinäkyvyyden asettamiseen. Tässä määritämme sen arvon muodossa ' 0 ”, mikä tarkoittaa, että kun siirtyminen alkaa, div piilotetaan kahdeksi sekunniksi.
Siirtymäarvojen asettamisen jälkeen käytämme ' syöttö ' päästäksesi HTML-tiedostossa luotuun syöttötyyppiin ja asettamaan syöttöelementin pseudoluokan ' :tarkistettu ”. Sitten pääsemme luotuun div-tiedostoon ja ' + ” -operaattoria käytetään yhdistämään valintaruutu div-elementtiin. Siten, kun valintaruudulle suoritetaan toiminto, sen käyttö vaikuttaa div. Seuraavaksi asetamme läpinäkyvyyden arvoksi ' 1 ':
syöttö : tarkistettu + div {opasiteetti : 1
}
merkintä: Määritämme läpinäkyvyyden arvoksi ' 1 ”, mikä tarkoittaa, että kun valintaruutu on merkitty, luotu div tulee näkyviin. Lisäksi poista sen merkintä piilottaaksesi div
Kuten näet, div näytetään ja piilotetaan käyttämällä ' siirtyminen ' omaisuutta ja ' :tarkistettu ” pseudoluokan elementti:
Olemme selittäneet tavan piilottaa ja näyttää div, jolla on siirtymäominaisuus CSS:ssä.
Johtopäätös
Näytä ja piilota div: siirtyminen ' omaisuutta ja ' :tarkistettu ' pseudoluokan elementtiä käytetään siten, että div opacityn arvoksi asetetaan ' 0 ”, ja :checked pseudo-class elementissä aseta peittävyydeksi ” 1 ”. Kun käyttäjä napsauttaa valintaruutua, div tulee näkyviin, ja kun se poistetaan, div piilotetaan. Tässä oppaassa olemme kuvanneet menetelmän div piilottamiseen ja näyttämiseen siirtymäominaisuuden avulla.