Sammen med introduktionen af CSS3 kommer mange nye funktioner, der er tilgængelige til brug for at skabe store effekter; en af de mest nyttige er overgangen egenskaben.
Overgangsejendommen er en vigtig ny udvikling i CSS. Det kan bruges til at skabe en dynamisk forandringseffekt på en div eller klasse ved hjælp af en simpel struktur:
transition: property duration timing-function delay;CSS3's overgang er en fantastisk måde at tilføje en lille animation til websteder uden det store overhead af et JavaScript-bibliotek som jQuery.
Før vi starter, kan du se en demo her overgangshuse i aktion .
For det første, for at overgangsejendommen skal fungere, skal den standardegenskab, som den skal anvendes til, defineres. Formentlig de to mest almindelige egenskaber, der vil blive defineret, er bredde og højde. For at skrive egenskaben alene skal du blot bruge:
transition-property: define propertyEfterfølgende, når ejendommen er blevet defineret, skal start- og slutværdierne tildeles. I tilfælde af værdier som bredde eller højde skal ejendommen indstilles med en startværdi og derefter en slutværdi med en anden betingelse.
For eksempel her indstiller vi overgangsegenskaben til bredden, så startværdien af bredden og derefter indstiller slutværdien, når elementet svæves over:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Nu hvor vi har defineret ejendommen for at transformere, start- og slutværdierne, skal vi definere varigheden af overgangen. Dette opnås ved at definere en længde i enten sekunder eller millisekunder som nedenfor:
transition-duration: duration;Ved at opbygge dette i eksemplet oprettes følgende kode:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Dette betyder, at mainheader div vil udvide med 25px over en varighed på 5 sekunder.
Koden er tilstrækkelig til at skabe en fin effekt, men vi kan yderligere udnytte CSS3 overgangseiendommen ved at bruge timing-funktion. Ved hjælp af denne egenskab er det muligt at ændre hastighedskurven for overgangsvarigheden. Overgangsegenskaben er som standard indstillet til en lineær kurve. Du kan dog definere lethed, lethed, lethed, lethed-out og endda cubic-bezier for at ændre hastighedskurven. Cubic-bezier giver dig mulighed for at definere dine egne værdier ved hjælp af (n, n, n, n) hvor n kan være mellem 0 og 1 (for eksempel lineært ville være (0,0,1,1)).
Tilføjelse i denne kode til vores eksempel resulterer i:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Endvidere definerer en overgangsperiode med overgangsperiode ved brug af overgangsforsinkelsesegenskaben en pause, før overgangseffekten begynder:
transition-delay: time;Endelig er det vigtigt at overveje to ting, når du bruger CSS3 overgangsejendommen. For det første kræver de fleste browsere i omløb i øjeblikket et browser præfiks til at bruge det (undtagelserne er IE10, Opera og Firefox16 +):
-moz-overgang: til Firefox 15
-webkit-overgang: til Chrome og Safari
(Husk, at IE9 og lavere ikke understøtter overgangseiendommen overhovedet.)
For det andet, selv om jeg har brugt lang hånd i eksemplerne ovenfor for klarhed, anses det for bedste praksis at skrive i kort form som følger:
#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;}Brug CSS3s overgangsejendom? Hvordan sammenligner det med jQuery-baserede tweens? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, bevægelsesbillede via Shutterstock.