CSS3: n käyttöönottoon liittyy monia uusia ominaisuuksia, jotka ovat käytettävissä käytettäessä suuria vaikutuksia. yksi hyödyllisimmistä on siirtymäominaisuus .
Siirtymisominaisuus on tärkeä uusi kehitys CSS: ssä. Sitä voidaan käyttää luomaan dynaaminen vaihtuva vaikutus div tai luokkaan käyttäen yksinkertaista rakennetta:
transition: property duration timing-function delay;CSS3: n siirtyminen on loistava tapa lisätä hieman animaatiota sivustoihin, joissa ei ole suurta Java-kirjaston kaltaista ylärajaa, kuten jQuery.
Ennen kuin aloitamme, näet demosta tässä siirtymisominaisuus toiminnassa .
Ensinnäkin, jotta siirtymisominaisuus toimisi, standardiominaisuus, johon sitä sovelletaan, on määriteltävä. Luultavasti kaksi yleisintä ominaisuutta, jotka määritellään, ovat leveys ja korkeus. Jos haluat kirjoittaa omaisuuden itsenäiseksi, käytä vain:
transition-property: define propertyJälkeen, kun omaisuus on määritelty, aloitus- ja loppuarvot on määritettävä. Arvojen, kuten leveyden tai korkeuden, ominaisuus on asetettava alkuarvolla ja sitten lopullisella arvolla jonkin muun ehdon kanssa.
Esimerkiksi tässä asetetaan siirtymisominaisuus leveyteen, sitten leveyden alkuarvo ja asetetaan loppuarvo, kun elementti on liukuva:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Nyt, kun olemme määritelleet muuttuvan omaisuuden, alku- ja loppuarvot, meidän on määriteltävä siirtymisen kesto. Tämä saavutetaan määrittämällä pituus joko sekunteina tai millisekunteina alla:
transition-duration: duration;Tämän esimerkin rakentamiseksi luodaan seuraava koodi:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Tämä tarkoittaa, että pään päädyn div laajenee 25px: llä 5 sekunnin ajan.
Koodi riittää luomaan mukavan vaikutelman, mutta voimme edelleen hyödyntää CSS3-siirtymäominaisuutta ajoituksen avulla. Tämän ominaisuuden käyttäminen on mahdollista muuttaa siirtymäkeston nopeuskäyrää. Siirtymisominaisuus on oletusarvoisesti lineaarinen käyrä. Voit kuitenkin määrittää nopeuskäyrän helpottamiseksi, helpottamiseksi, helpottamiseksi, helpottamiseksi ja jopa kuutioiksi. Cubic-bezier avulla voit määrittää omat arvosi käyttämällä (n, n, n, n), missä n voi olla välillä 0 ja 1 (esimerkiksi lineaarinen olisi (0,0,1,1)).
Tämän koodin lisääminen esimerkkisi tuloksiin:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Lisäksi, kuten siirrettävyyden kaltainen, siirtymäviive-ominaisuuden käyttäminen määrittää tauon ennen siirtymävaikutuksen alkamista:
transition-delay: time;Lopuksi on tärkeää ottaa huomioon kaksi asiaa, kun käytetään CSS3-siirtymäominaisuutta. Ensinnäkin useimmat nykyään käytössä olevissa selaimissa tarvitsevat selaimen etuliitteen käyttää sitä (poikkeukset ovat IE10, Opera ja Firefox16 +):
-moz-transition: Firefoxille 15
-webkit-transition: Chrome ja Safari
(Muista, että IE9 ja alempi eivät tue siirtymisominaisuutta lainkaan.)
Toiseksi, vaikka olen käyttänyt pitkiä käsiä edellä olevissa esimerkeissä selkeyden vuoksi, sitä pidetään parhaimpana käytäntönä lyhyenä muodossa seuraavasti:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}Käytä CSS3: n siirtymisominaisuutta? Kuinka se vertaa jQuery-pohjaisiin tweeneihin? Kerro meille kommentit.
Esitetty kuva / pikkukuva, liikkuva kuva kautta Shutterstock.