Az előző posztokban láthattuk, hogy a CSS pszeudo-osztályok segítségével más-más stílust adhatunk egy elemnek annak állapotától függően. De hogyan érhetjük el, hogy a stílusátmenet ne hirtelen, hanem fokozatosan történjen? A CSS 3
transition tulajdonsága lehetőséget ad arra, hogy ilyen effekteket Javascript nélkül is létre tudjunk hozni.
Mivel a tulajdonság pontos megvalósítása még változhat, ezért — ahogy már megszokhattuk — az egyes layout-motor fejlesztők itt is egyedi neveket vezettek be. A Webkit alapú böngészők esetén
-webkit-transition, a Gecko alapúaknál
-moz-transition, a Presto esetében pedig
-o-transition a tulajdonság pontos neve. Szerencsére paraméterezésük minden motor esetén megegyezik. Akik fejből tudják, hogy melyik böngésző melyik layout-motort használja, azok az előző mondatból már kikövetkeztették, hogy a Chrome, a Safari, a Firefox és az Opera a szerencsés nyertesek. Viszont hozzátartozik az igazsághoz, hogy mivel a Gecko csak az 1.9.3 verziótól támogatja, ezért a Firefox csak a még meg nem jelent 3.7-es verziótól tudja az itt leírtakat.
Az Opera pedig, bár elvileg támogatja, gyakorlatilag nem mindig a várakozásoknak megfelelően jeleníti meg az átmeneteket. Így végeredményben azt kell mondanom, hogy a példák maradéktalan élvezetéhez Webkit alapú böngésző (azaz Chrome vagy Safari) javasolt. Ha beállítjuk CSS-ben az alapértelmezett színt, akkor Opera alatt is a várakozásoknak megfelelően működik. A többi böngészőnél ez nem fontos.
A hosszas bevezető után lássuk a két példánkat, amelyeken keresztül a dolog működését szemléltetjük. Az alábbi képek élesebbek, ha az egeret föléjük mozgatjuk, egyébként elhalványodnak. Ami a lényeg: ez a változás nem egyből, hanem fél másodperc alatt zajlik le. (Akinél egyből megtörténik, annak a böngészője nem támogatja ezt a tulajdonságot).
Az Ön böngészője nem támogatja az <em>iframe</em> használatát.
A fenti példa létrehozásához a következő kódot alkalmaztam:
3 | -webkit-transition: opacity .5s ease-in; |
4 | -moz-transition: opacity .5s ease-in; |
5 | -o-transition: opacity .5s ease-in; |
Most lássunk egy példát egy olyan űrlapra, ahol az éppen kiválasztott beviteli mező háttere megváltozik:
A varázslat a következő beállításoknak köszönhető:
2 | background-color: white; |
3 | -webkit-transition: background-color .5s linear; |
4 | -moz-transition: background-color .5s linear; |
5 | -o-transition: background-color .5s linear; |
7 | input:focus, textarea:focus { |
Most következzen a kód magyarázata. A fenti példákban a
transition ún. shorthand formáját alkalmaztam, azaz egyben adtam meg több beállítást:
1 | transition: [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ] |
Lássuk az egyes tulajdonságokat külön-külön:
transition-property
Itt kell megadnunk azt a tulajdonságot, amelyre az átmenetet alkalmazni akarjuk. Ez lehet egy szín (
color), lehet az áttetszőség (
opacity), de lehet az elem szinte bármely tulajdonsága, mint például a
left, a
border-width, stb. Nyilvánvalóan nem értelmezhető viszont az olyan tulajdonságokra, amelyekből nem lehet átmeneteket képezni, mint például a
position, a
display, stb.
transition-duration
Itt állíthatjuk be, hogy mennyi idő alatt menjen végbe az átmenet. Például 1.5s beállítása esetén — nem meglepő módon — másfél másodperc alatt fog az átmenet lezajlani.
transition-timing-function
Itt egy függvényt adhatunk meg az átmenet sebességének meghatározására. Ha a
linear beállítást használjuk, akkor az átmenet egyenletes sebességgel megy végbe. Az
ease-in hatására az átmenet lassan kezdődik és később gyorsul fel. Az
ease-out ennek az ellenkezője: gyorsan indul, és a végén lassabb. Vagy megadhatunk tetszőleges
Bézier-görbét a sebesség meghatározásához:
cubic-bezier(x1, y1, x2, y2).
transition-delay
Ha azt szeretnénk, hogy az átmenet ne egyből, hanem egy bizonyos idő elteltével kezdődjön, akkor ennek a tulajdonságnak is érteket kell adnunk. A fenti példákban ezt nem használtam.
A
transition tulajdonságok részletes leírását az egyes layout-motorok szemszögéből ezeken a linkeken találjátok:
Webkit,
Gecko,
Presto.
A CSS 3 tehát ismét kezünkbe adott egy lehetőséget, hogy egy, a modern web designban népszerű, effektet
jQuery vagy egyéb Javascript megoldás nélkül alkalmazhassunk. Ráadásul mivel az ehhez hasonló effektek ritkán nélkülözhetetlen elemei egy weboldalnak, még azért sem kell aggódnunk, hogy mi van akkor ha egy nem kompatibilis böngészőben az átmenet nem fokozatosan, hanem egyből végbemegy. A web design szakma egyre inkább egyetért abban, hogy itt az ideje a weboldal építésnél azt a szemléletet magunkévá tenni, hogy a funkcionalitásnak működnie kell minden népszerű böngészőben, viszont ha a egy-két spéci effekt csak a legkorszerűbb böngészőkben látható az még nem a világ vége.
