Bewegung
Nichts ändert sich in einem Sprung, und nichts bewegt sich, es sei denn, jemand fragt. Gebunden an Energie (was passiert, wird als geschehend gesehen) und an das „nie störend".
Auf dieser Seite
Every change of state is a transition
Farben von Tag bis Nacht, Platz bei Dichteänderungen, Größe beim Wachsen des Inhalts, Hover. Eine Dauer und eine Kurve, die weich beginnt und weich landet. Feitios Basis-CSS tut dies bereits für jedes Element.
320ms, cubic-bezier(0.3, 0, 0.2, 1)Starts soft, speeds up in the middle and lands without overshooting.
260ms, cubic-bezier(0.2, 0.9, 0.3, 1.25)Blätter fallen schnell und gehen leicht über das Ende hinaus, bevor sie sich festsetzen: der kleine Sprung von Papier, das auf den Tisch fällt.
Papier platziert
So kommen schwebende Dinge an: ein ausgeschnittenes Blatt, das sich auf dem Tisch festsetzt, leicht gedreht wird und einen Schatten wirft, begleitet von einem kleinen Sprung. Nur wenn jemand handelt.
Einmal pro Papier
Wenn eine Aktion mehrere Dinge erscheinen lässt, kommt nur eines als platziertes Papier an: dasjenige, das zur Person spricht, wie die Benachrichtigung, dass es funktioniert hat. Die anderen gleiten ein, wie eine neue Zeile in einer Liste, die Platz schafft und die darunterliegenden vorstoßt. Zwei Papiere, die gleichzeitig landen, konkurrieren um den Blick und sehen aus wie Chaos.
Reduzierte Bewegung
Wenn das System nach weniger Bewegung fragt, gibt es keine. Keine Übergänge, kein platziertes Papier.
Nichts bewegt sich, bis jemand fragt
Do
Bewegung, die auf jemanden antwortet, zeigt an, was geändert wurde.
Don’t
Bewegung, die niemand verlangt, ist Rauschen: sie ermüdet und ablenkt.
Wo der Übergang abschaltet
Dinge, die jeden Moment bewegen – wie Ziehen, Zeichnen, Vergrößern oder Scrollen einer riesigen Liste –, können nicht auf 320ms warten: das Element würde hinter dem Finger zurückbleiben. In diesen Bereichen schaltet data-motion="direct" den Übergang aus. Außerhalb davon gilt die Regel.
data-motion="direct"Ziehen