Transitorische Schnittstellen, codiert

Pasquale D’Silva’s Artikel Transitional Interfaces hat wirklich die Runde gemacht. Es ist eine kurze Lektüre, die einen wichtigen Punkt hervorhebt. Übergänge und Animationen können mehr als nur Augenfutter sein. Sie können Ihrem Gehirn einen Hinweis darauf geben, was auf einer Seite geschieht.

Wenn ein Listenelement in eine Liste eingefügt wird, anstatt plötzlich zu erscheinen, macht eine Animation, die die Liste verschiebt, um Platz zu schaffen, extrem deutlich, was vor sich geht. Ansonsten ist es ein Augenblick und schon verpasst.

Die animierten GIFs im Artikel machen es möglich, also schauen Sie sich das an.

Pasquale hat nicht gesagt, tun Sie dies jedes Mal genau so! Aber es sind schöne Beispiele, also dachte ich, ich versuche, sie im Web umzusetzen.

Check out the coded examples of transitional interfaces on CodePen.

Nichts Bahnbrechendes, aber ein paar Tricks im Spiel.

Bei den Beispielen zum Hinzufügen von Listenelementen wird der Platz in der Liste geschaffen, indem die Listenelemente zunächst auf max-height: 0; gesetzt werden und eine @keyframes Animation darauf ausgeführt wird, die die max-height auf 50 erweitert. Seien Sie vorsichtig, um sicherzustellen, dass diese Zahl hoch genug ist, um den Platz mit einer angemessenen Vergrößerung des Textes abzudecken.

Die @keyframes haben nur einen to { } Block. Wenn der from { } oder 0% { } Block weggelassen wird, beginnen die animierten Eigenschaften einfach so, wie sie natürlich sind. Höhe, Deckkraft und Skalierung werden hier verwendet, um es hervorzuheben.

.new-item {
  max-height: 0;
  opacity: 0;
  transform: scale(0);
  animation: growHeight 0.2s ease forwards;
}
@keyframes growHeight {
  to { 
    max-height: 50px;
    opacity: 1;
    transform: scale(1);
  }
}

Im Slide-in-Beispiel wird *zuerst* der Platz in der Liste geschaffen, *dann* wird das Element in diesen Platz geschoben. Dies geschieht durch die Verwendung von zwei verschiedenen @keyframe-Animationen. Eine, um den Platz zu schaffen, die andere, um das Schieben durchzuführen. Sie können beide auf ein einzelnes Element anwenden und die Zeit, in der sie ausgeführt werden, staffeln.

.new-item {
  max-height: 0;
  opacity: 0;
  transform: translateX(-300px);
  animation: 
    openSpace 0.2s ease forwards,
    moveIn 0.3s 0.2s ease forwards;
}
@keyframes openSpace {
  to { 
    max-height: 50px;
  }
}
@keyframes moveIn {
  to { 
    opacity: 1;
    transform: translateX(0);
  }
}

Der zweite animation-Wert hat einen zweiten Zeitparameter, nämlich die Verzögerung. Die Verzögerung ist gleich der Dauer der ersten Animation. Sie laufen also nacheinander.

Im Beispiel für die Pop-up-Detailansicht wird das Listenelement durch die Verwendung von transform: scale(X); vergrößert. Dahinter wird die Liste durch die Verwendung eines Skalierungs-Transforms aus der Ansicht versteckt. Sie wird viel kleiner und verbirgt sich hinter dem erweiterten Listenelement, das sich um ein Vielfaches seiner Größe kompensiert.