Modernizr e CSS3: gestire gli eventi di fine animazione e transizione con javascript

dicembre 03, 2013

upcreative

4 Commenti

Usare animazioni e transizioni CSS3 in siti e applicazioni web è ormai diventata (fortunatamente) pratica sempre più comune ed i vari web designer si sbizzarriscono con il loro utilizzo per cercare di distinguersi in creatività e design rispetto agli altri.

Molte volte navigando in rete ci imbattiamo in portfolio o showcase che usano una combinazione di effetti CSS3 ben organizzati e disposti secondo un determinato ordine, al fine di raggiungere un certo tipo di risultato.

Anche a me capita molto spesso di dover far partire un’animazione o transizione nel momento in cui l’altra è appena terminata. In questo articolo che ti voglio parlare di una risorsa secondo me molto utile: come gestire gli eventi di callback di fine animazione e transizione nei CSS3.

Demo

Download

Modernizr e CSS3

Un tool che non deve mai mancare nelle mie applicazioni, siano esse mobile o web, è sicuramente Modernizr. Grazie ad esso possiamo tranquillamente inserire nei nostri progetti tutte le nuove tecnologie e funzionalità che il web ci mette a disposizione, in modo da gestire i browser che non le supportano e applicando la tecnica del miglioramento progressivo molto facilmente.

Mi ero servito di Modernizr per applicare la tecnica del progressive enhancement in questo articolo su come realizzare un menù stile mobile con i CSS3.

Vediamo un esempio di come usare il framework per richiamare tramite javascript una funzione all’evento di fine animazione o transizione CSS3 di un elemento DOM.

Supponiamo di avere due animazioni e di voler far partire la seconda solo al termine della prima:

Animazione 1: Rotazione in Entrata

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownLeft {

0% {

-webkit-transform-origin: left bottom;

transform-origin: left bottom;

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

opacity: 0;

}

100% {

-webkit-transform-origin: left bottom;

transform-origin: left bottom;

-webkit-transform: rotate(0);

transform: rotate(0);

opacity: 1;

}

@keyframes rotateInDownLeft {

0% {

-webkit-transform-origin: left bottom;

-ms-transform-origin: left bottom;

transform-origin: left bottom;

-webkit-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);

transform: rotate(-90deg);

opacity: 0;

}

100% {

-webkit-transform-origin: left bottom;

-ms-transform-origin: left bottom;

transform-origin: left bottom;

-webkit-transform: rotate(0);

-ms-transform: rotate(0);

transform: rotate(0);

opacity: 1;

}

.rotateInDownLeft {

-webkit-animation-name: rotateInDownLeft;

animation-name: rotateInDownLeft;

}

Animazione 2: Effetto fade in uscita

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRight {

0% {

opacity: 1;

-webkit-transform: translateX(0);

transform: translateX(0);

}

100% {

opacity: 0;

-webkit-transform: translateX(20px);

transform: translateX(20px);

}

@keyframes fadeOutRight {

0% {

opacity: 1;

-webkit-transform: translateX(0);

-ms-transform: translateX(0);

transform: translateX(0);

}

100% {

opacity: 0;

-webkit-transform: translateX(20px);

-ms-transform: translateX(20px);

transform: translateX(20px);

}

.fadeOutRight {

-webkit-animation-name: fadeOutRight;

animation-name: fadeOutRight;

}

Credits: le animazioni sono state prelevate dal codice sorgente del framework animate.css (ne avevo parlato in questo articolo)

Per prima cosa includiamo Modernizr nel documento, all’interno del tag <head>, come dice la documentazione:

<script src="js/modernizr.custom.js"></script>

1	<script src="js/modernizr.custom.js"></script>

Per spiegare il concetto nel modo più semplice applicheremo il primo effetto ad una div, e dopo l’evento di fine animazione aspetteremo 5 secondi per poi passare alla seconda animazione. Utilizziamo jQuery per realizzare tutto ciò:

$(function(){

   var endAnimationEventName = getEndAnimationName();  

   //aggiungiamo la classe per l'animazione e all'evento di dine animazione
   //eseguiamo (una volta con '.one') la funzione successiva
   $("#mydiv").addClass("rotateInDownLeft").one(endAnimationEventName, function(){
       $(this).text("Aspetto 5s poi me ne vado...");
       setTimeout(function(){
           $("#mydiv").addClass("fadeOutRight");   
       }, 5000); //aspettiamo 5 secondi
   });

});

$(function(){

var endAnimationEventName = getEndAnimationName();

//aggiungiamo la classe per l'animazione e all'evento di dine animazione

//eseguiamo (una volta con '.one') la funzione successiva

$("#mydiv").addClass("rotateInDownLeft").one(endAnimationEventName, function(){

$(this).text("Aspetto 5s poi me ne vado...");

setTimeout(function(){

$("#mydiv").addClass("fadeOutRight");

}, 5000); //aspettiamo 5 secondi

});

OK, ma come fa la funzione “getEndAnimationName” a riprendere il nome dell’animazione?

E’ proprio qui che entra in gioco Modernizr: ci serviamo della funzione “prefix” per conoscere il prefisso del browser dell’utente associato alla proprietà passata come input.

function getEndAnimationName(){
   var endAnimationName = {
       'WebkitAnimation' : 'webkitAnimationEnd',
       'OAnimation' : 'oAnimationEnd',
       'msAnimation' : 'MSAnimationEnd',
       'animation' : 'animationend'
   };
   return endAnimationName[ Modernizr.prefixed( 'animation' ) ];
}

function getEndAnimationName(){

var endAnimationName = {

'WebkitAnimation' : 'webkitAnimationEnd',

'OAnimation' : 'oAnimationEnd',

'msAnimation' : 'MSAnimationEnd',

'animation' : 'animationend'

};

return endAnimationName[ Modernizr.prefixed( 'animation' ) ];

}

Nella funzione abbiamo preparato un oggetto con i prefissi di tutti i browser come chiavi e i nomi degli eventi di fine animazione come valori; quindi impostiamo come parametro di ritorno il valore corrispondente alla chiave restituita da Modernizr.

Ovviamente, se abbaiamo bisogno del nome dell’evento di inizio animazione, la procedura sarà la stessa, modificando i nomi degli eventi con “webkitAnimationStart“, “oAnimationStart“, “MSAnimationStart“, e “animationStart“.

Per impostare l’evento di fine transizione, il procedimento sarà analogo:

function getEndTransitionnName(){
   var endTransitionName = {
	'WebkitTransition' : 'webkitTransitionEnd',
	'OTransition' : 'oTransitionEnd',
	'msTransition' : 'MSTransitionEnd',
	'transition' : 'transitionend'
   };
   return endTransitionName[ Modernizr.prefixed( 'transition' ) ];
}

function getEndTransitionnName(){

var endTransitionName = {

'WebkitTransition' : 'webkitTransitionEnd',

'OTransition' : 'oTransitionEnd',

'msTransition' : 'MSTransitionEnd',

'transition' : 'transitionend'

};

return endTransitionName[ Modernizr.prefixed( 'transition' ) ];

}

Demo

Download

Conculsioni

Grazie a questa tecnica sono riuscito ad organizzare e coordinare la sinergia tra le view delle applicazioni mobile HTML5 che ho distribuito su App Store. Mi è tornata particolarmente utile per esempio al fine di nascondere o eliminare la div di una view al termine di una animazione di uscita per alleggerire il markup (migliorando quindi le prestazioni).

E tu? Quale tecniche utilizzi per gestire le animazioni e le transizioni nei tuoi progetti?

Hey! Sto scrivendo un e-book su come aumentare le performance e la fluidità per le tue HTML mobile app! Segui i consigli e le tecniche di cui mi sono servito per creare le mie applicazioni (come Tint, Dieta SI o NO?).

Iscriviti alla newsletter per sapere quando sarà pronto!

HTML Mobile Accelerato (E-book)

Lascia la tua email per ricevere aggiornamenti e sapere quando sarà disponibile

Clicca qui per avere maggiori informazioni

Giacomo Freddi

Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi, ma la sua passione principale è quella della creazione di interfacce front-end e back-end utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript.

Tags:

animazioni,

css3,

javascript,

Modernizr,

transizioni,

Modernizr e CSS3: gestire gli eventi di fine animazione e transizione con javascript

Modernizr e CSS3

Animazione 1: Rotazione in Entrata

Animazione 2: Effetto fade in uscita

Conculsioni

HTML Mobile Accelerato (E-book)

Giacomo Freddi

Tags:

Post correlati

Tweets su di me

Trovi upCreative anche su:

Il meglio di upCreative

GIACOMO FREDDI

Social Networks

Iscriviti alla Newsletter

Ultimi Tweets

Ultimi articoli

Modernizr e CSS3: gestire gli eventi di fine animazione e transizione con javascript

Modernizr e CSS3

Animazione 1: Rotazione in Entrata

Animazione 2: Effetto fade in uscita

Conculsioni

HTML Mobile Accelerato (E-book)

Giacomo Freddi

Tags:

Post correlati

Vuoi realizzare HTML Mobile Apps?

Tweets su di me

Trovi upCreative anche su:

Il meglio di upCreative

GIACOMO FREDDI

Social Networks

Iscriviti alla Newsletter

Ultimi Tweets

Ultimi articoli