Nach dem „Skewmorphismus“ von Apples ersten Stunden in der mobilen Welt bot uns Microsoft einen neuen Ansatz für das Bildschirmdesign: Wir waren im Jahr 2012, wir hatten gerade das Aufkommen des sogenannten „Flat“-Designs erlebt.
Nach einigen Jahren der Neugestaltung digitaler Dienste mit Volltonfarben, verfeinerten Designs, kurz gesagt durch Vereinfachung, hier ist Google und seine neuen Empfehlungen, die erneut die Regeln von Ergonomie und Design auf den Kopf stellen: "Material Design" (http://www.google.com/design/spec/material-design/introduction.html).
Wenn die Dinge für den Frontend-Entwickler auf den ersten Blick nicht grundlegend verändert erscheinen, müssen wir uns hauptsächlich auf die Animationen und die Bedeutung konzentrieren, die wir ihnen geben.
(http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity)
Das Produzieren von Effekten, mit denen animierte Übergänge den Besuchern eine eigene Geschichte erzählen können, basiert auf einem Prinzip: Die Möglichkeit, Animationen an vom Digitalteam ausgewählten Schlüsselmomenten zu verketten.
Seit einigen Jahren liefern uns moderne Browser und ihre jeweiligen Rendering-Engines (oft auf Basis von Webkit) das technische Element, das für diese Errungenschaft erforderlich ist: das Auslösen von Ereignissen.
Und insbesondere das transitEnd-Ereignis, das das Ende einer animierten Zustandsänderung eines oder mehrerer Elemente markiert.

Beispiel:

Angenommen, wir möchten ein Element erscheinen lassen und es dann verlängern, bevor wir es schließlich vergrößern.
Wird eine „klassische“ Animation, also ein Zustandswechsel, eingestellt, finden alle Änderungen gleichzeitig statt. Das Element erscheint, nimmt dann Höhe an und verlängert sich in einer einzigen Bewegung. Mit dem TransitionEnd-Ereignis können Sie auf das Ende der vorherigen animierten Zustandsänderung warten, bevor Sie mit der nächsten beginnen.
Wir können daher in Begriffen einer Staatenfolge, eines Übergangsszenarios denken.
:
1. CSS-Klassen werden definiert

.initial-state-element-invisible {Übergang: alle Ease-out 250ms; -Webkit-Übergang: alle Ease-out 250ms; -moz-Übergang: alle Ease-out 250ms; -o-Übergang: alle Ease-out 250ms; Deckkraft: 0; Höhe: 100px; } .state-number-two-element-visible {Deckkraft: 1; } .state-number-three-highest-element { Breite: 100px; Höhe: 300px; } .state-number-three-widest-element { Breite: 300px; Höhe: 300px; }

2. Ein bisschen JavaScript (JQuery), um auf den Ereignisauslöser zu hören und die neuen CSS-Eigenschaften zum richtigen Zeitpunkt anzuwenden.

$('.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(){ $( this) .addClass('state-number-three-largest-element'); }); }); });

Zustand 1
Unser Element ist unsichtbar
Zustand 2
Unser Element ist sichtbar
Staat3
Wenn unser Element mit dem Erscheinen fertig ist, beginnt es an Höhe zu gewinnen …
Staat4
…dann legt er sich hin.

Abschließend

Dieses einfache Beispiel, das den Empfehlungen zur Animationsabsicht entspricht, zeigt, dass es möglich ist, die Benutzerfreundlichkeit einer Benutzeroberfläche allein durch ihre Animationen mithilfe des transitEnd-Ereignisses zu verstehen.

---