Transitions

Hva

I denne modulen skal vi se hvordan CSS tillater myke overganger fra en tilstand til en annen, der vi definerer en tilstand som et sett regler med tilhørende verdier. Eksemplene 1, 2 og 3 viser hvordan vi kan få til dette uten å involvere JavaScript. Eksempel 4 og 5 bruker et enkelt javaskript for å legge til en klassedefinisjon til et element. I modulen Animert så vi hvordan vi kunne kontrollere overganger , en rotasjon, detaljert ved hjelp av JavaScript og timer kontroll.

Eksempel 1

Gitt følgende stilsett (og ikke noe javascripting):

div.test1{
width:100px; height:50px; background:blue;
 
-webkit-transition-property:width;
transition-property:width;
 
-webkit-transition-duration:2s;
transition-duration:2s;
}
div.test1:hover{ width:300px }

dra musa over den blå ruta (div class="test1").

Eksempel 2

Gitt følgende stilsett (og ikke noe javascripting):

div.test2{
width:50px; height:20px; 
background-color:yellow; color:yellow;font-size:2px;
margin:10px 10px 10px 10px;
border:1px solid gray;
padding-top:7px;
 
-webkit-transition-property:width,color,font-size;
transition-property:width,color,font-size;
 
-webkit-transition-duration:2s;
transition-duration:2s;
}
div.test2:hover{ width:300px; color:black; font-size:18px}

dra musa over en av de gule feltene (div class="test2").

Hallo alle sammen, sjekk dette

Dette går da ganske bra

Eller blir det litt hakkete ?

Eksempel 3

Gitt følgende stilsett (og ikke noe javascripting):

img.test3{
margin:10px 10px 10px 10px;
border:1px solid gray;
width:30px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
 
-webkit-transition-property:width,-webkit-transform:rotate();
transition-property:width, transform:rotate();
 
-webkit-transition-duration:2s;
transition-duration:2s;
}
img.test3:active{ 
width:40px; 
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
img.test3:hover{ 
border:2px solid red;
}

press på et av bildene (img class="test3").

Eksempel 4

Her bruker vi to forskjellige class-regler , test4A og test4B, Vi forsøker å få til en transition når vi introduserer test4B i tillegg til test4A.

Gitt følgende stilsett :

/* 4A */
img.test4A{
margin:10px 10px 10px 10px;
border:1px solid gray;
width:30px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
 
-webkit-transition-property:width,-webkit-transform:rotate();
transition-property:width, transform:rotate();
 
-webkit-transition-duration:2s;
transition-duration:2s;
}
/* 4B */
img.test4B{ 
width:40px; 
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}

og følgende javascript kode:

function toggleClasses(elt){
	elt.classList.toggle("test4B");
}

klikk på et av bildene (img class="test4A") for å kjøre toggleClasses().

Eksempel 5

Her bruker vi igjen to forskjellige class-regler ,test5A og test5B, Vi forsøker å få til en transition når vi introduserer test5B i tillegg til test5A.

Gitt følgende stilsett :

/* 5A */
div.test5A{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
 
-webkit-transition-property:-webkit-transform:rotate();
transition-property:transform:rotate();
 
-webkit-transition-duration:15s;
transition-duration:15s;
}
/* 5B */
div.test5B{  
-webkit-transform:rotate(720deg);
transform:rotate(720deg);
}

og følgende javascript kode:

function toggleClasses5(){
    elt=document.querySelector("div.test5A");
	elt.classList.toggle("test5B");
}

kanskje en litt overraskende effekt, men husk at det er div'en som omslutter bildet som roteres, og den har ingen begrensnig i bredde.

Eksempel 6

Du kan jo prøve denne:

function togglePageRotation(styleClass){
    var elt=document.getElementsByClassName('maincontent')[0];
    elt.classList.toggle(styleClass);
}

Med dette stilsettet:

.rotated0A
{
    transform:rotateY(0deg);
    -webkit-transform:rotateY(0deg);
    
    -webkit-transition-property:rotateY();
    transition-property:rotateY();
 
    -webkit-transition-duration:4s;
    transition-duration:4s;
}
.rotated0B
{
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
}

Referanser

CSS (Cascading Style Sheets) W3C www.w3.org/TR/CSS/ 08-03-2014