Dopo lo “skewmorphism” delle prime ore di Apple nel mondo Mobile, Microsoft ci ha offerto un nuovo approccio al design dello schermo: eravamo nel 2012, avevamo appena vissuto l'avvento del cosiddetto design “Flat”.
Dopo qualche anno di ridisegno dei servizi digitali utilizzando tinte unite, design più raffinati, insomma semplificando, ecco Google, e le sue nuove raccomandazioni che sconvolgono nuovamente le regole dell'ergonomia e del design: "Material Design" (http://www.google.com/design/spec/material-design/introduction.html).
Se a prima vista le cose non sembrano fondamentalmente trasformate per lo sviluppatore Front-End, è principalmente sulle animazioni e sul significato da dare loro che dobbiamo concentrare i nostri sforzi.
(http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity)
La produzione di effetti che consentono alle transizioni animate di raccontare una storia ai visitatori da soli si basa su un principio: essere in grado di concatenare le animazioni nei momenti chiave scelti dal team digitale.
Ormai da diversi anni, i moderni browser ei rispettivi motori di rendering (spesso basati su Webkit) ci forniscono l'elemento tecnico necessario per questo raggiungimento: l'attivazione degli eventi.
E più in particolare l'evento transitionEnd che segna la fine di un animato cambio di stato di uno o più elementi.

Esempio:

Diciamo che vogliamo far apparire un elemento e poi allungarlo prima di ingrandirlo finalmente.
Se viene impostata un'animazione “classica”, ovvero un cambio di stato, tutti i cambiamenti avverranno contemporaneamente. L'elemento apparirà, quindi prenderà altezza e si allungherà in un unico movimento. L'evento TransitionEnd consente di attendere la fine del precedente cambio di stato animato prima di iniziare quello successivo.
Possiamo quindi pensare in termini di successione di stati, uno scenario di transizione.
:
1. Le classi CSS sono definite

.initial-state-element-invisible {transizione: tutto allentamento 250 ms; -transizione-webkit: tutto esaurito 250ms; -moz-transizione: tutto allentamento 250 ms; -o-transizione: tutto allentamento 250ms; opacità: 0; altezza: 100px; } .stato-numero-due-elemento-visibile { opacità: 1; } .stato-numero-tre-elemento-più alto { larghezza: 100px; altezza: 300px; } .stato-numero-tre-elemento più largo { larghezza: 300px; altezza: 300px; }

2. Un po' di JavaScript (JQuery) per ascoltare il trigger dell'evento e applicare le nuove proprietà CSS al momento giusto.

$('.state-initial-element-invisible').click(function(){ $(this).addClass('state-number-two-element-visible'); $(this).one("transitionend webkittransitionEnd otransitionEnd MStransitionEnd", function(){ $(this).addClass('state-number-three-highest-element'); $(this).one("transitionend webkittransitionEnd otransitionEnd MStransitionEnd", function(){ $( questo) .addClass('stato-numero-tre-elemento-più grande'); }); }); });

Stato 1
Il nostro elemento è invisibile
Stato 2
Il nostro elemento è visibile
Stato3
Quando il nostro elemento ha finito di apparire, inizia a guadagnare altezza...
Stato4
...poi si sdraia.

Insomma

Questo semplice esempio, che soddisfa le raccomandazioni sull'intento dell'animazione, dimostra che è possibile aiutare a comprendere l'usabilità di un'interfaccia esclusivamente attraverso le sue animazioni utilizzando l'evento transitionEnd.

---