Compass, trasformazioni e transizioni

Compass mette a disposizione una serie di mixin per gestire transizioni e trasformazioni. Per comprenderne il funzionamento usiamo come al solito un semplice esempio.

Creiamo un quadrato, vi poniamo al centro 8 puntini e ne gestiamo l’:hover spostando ogni punto verso il bordo del quadrato. Per ciascun punto definiamo un delay e una funzione di timing diversa (provalo online).

Definiamo il codice HTML del quadrato e dei punti:

<div class="container">
<div class="point" id="point1"></div>
<div class="point" id="point2"></div>
<div class="point" id="point3"></div>
<div class="point" id="point4"></div>
<div class="point" id="point5"></div>
<div class="point" id="point6"></div>
<div class="point" id="point7"></div>
<div class="point" id="point8"></div>
</div>

Fatto questo passiamo alla stesura del file SCSS:

@import "compass/css3/border-radius";
@import "compass/css3/transition";
@import "compass/css3/transform";

		
.container{
	border: 1px solid #000;
	margin: 20px auto;
	width: 300px;
	height: 300px;
	position: relative;
	&:hover{
	 	 #point1{
			 @include translate(-150px, -150px);
	 	 }
	 	 #point2{
			 @include translate(0px, -150px);
	 	 }
	 	 #point3{
			 @include translate(150px, -150px);
	 	 }
	 	 #point4{
			 @include translate(150px, 0px);
	 	 }
	 	 #point5{
			 @include translate(150px, 150px);
	 	 }
	 	 #point6{
			 @include translate(0px, 150px);
	 	 }	 	 #point7{
			 @include translate(-150px, 150px);
	 	 }
	 	 #point8{
			 @include translate(-150px, 0px);
	 	 }
	}
}
.point{
	width: 20px;
	height: 20px;
	@include border-radius(10px);
	position: absolute;
	top: 140px;
	left: 140px;
	background-color: red;
	@include single-transition(transform, 1.5s, ease-in-out);
}
#point2{
	@include transition-timing-function(ease);
}
#point3{
	@include transition-timing-function(linear);
}
#point4{
	@include transition-delay(0.2s);
}
#point5{
	@include transition-delay(0.3s);
}
#point6{
	@include transition-delay(0.4s);
}
#point7{
	@include transition-delay(0.5s);
}
#point8{
	@include transition-delay(0.6s);
}

Dopo aver importato i mixin di Compass (transition, transform, e border-box) abbiamo definito il css di base di punti e quadrato.

Per ogni punto abbiamo definito una traslazione sfruttando il mixin translate e abbiamo sfruttato il mixin single-transition per definire una transizione della proprietà transform.

Abbiamo poi utilizzato i mixin transition-delay e transition-timing-function per modificare il delay e le funzioni di timing dei singoli punti. Compass si occuperà di gestire i prefissi sperimentali fornendoci un css che permetterà la visualizzazione dell’esempio sulla maggior parte dei browser disponibili sul mercato.