Animieren von Hinzufügungen und Löschungen in Listen (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]
Verwenden Sie Listenanimationen, um Änderungen in einer Sammlung ähnlicher Elemente anzuzeigen. Dies beinhaltet Animationen für das Hinzufügen und das Löschen. Beachten Sie, dass der Begriff "Liste" hier nicht auf das standardmäßige Einkaufslistenformat beschränkt ist, sondern z. B. auch ein Raster umfassen kann. Diese Animationen sorgen für einen gleichmäßigen optischen Übergang beim Einfügen oder Entfernen von Elementen und machen den Vorgang für den Benutzer leicht erkennbar. Während einer Hinzufügungsanimation gleiten vorhandene Elemente auseinander, um für das neue Element Platz zu machen. Das neue Element wird eingeblendet und wird dabei größer. Eine Löschungsanimation wirkt in umgekehrter Richtung.
Dieser Satz von Animationen umfasst die folgenden APIs:
- createAddToListAnimation
- createDeleteFromListAnimation
- createAddToSearchListAnimation
- createDeleteFromSearchListAnimation
Hinzufügen/Löschen in Listenanimationen
Verwenden Sie Listenanimationen, um das Einfügen oder Löschen von Elementen in einer Sammlung ähnlicher Elemente anzuzeigen. Diese Animationen unterscheiden sich insofern von den Animationen für das Hinzufügen oder Löschen in Suchlisten, als die Suchanimationen etwas schneller ablaufen, um das Filtern der Suchergebnisse zu ermöglichen, während der Benutzer den Suchbegriff eingibt.
Das folgende Video zeigt die Animationen für das Hinzufügen und Entfernen von Elementen in einer Liste:
Hinzufügen/Löschen in Suchlistenanimationen
Verwenden Sie die Suchlistenanimationen, wenn sich Elemente einer Liste im Rahmen eines Suchszenarios schnell ändern. Diese Animationen unterscheiden sich hinsichtlich des Timings von den Animationen zum Hinzufügen und Löschen von Listenelementen. Die Suchlistenanimationen reagieren schneller auf Szenarien wie beispielsweise fortlaufendes Filtern. Wenn ein Benutzer z. B. einen Suchbegriff für die Suche nach einem Element in einer Liste eingibt und diese Liste die Ergebnisse in Echtzeit filtert, sollte für die herausgefilterten Elemente die Animation für das Löschen aus der Suchliste verwendet werden. Wenn ein Benutzer im umgekehrten Fall nach einer Zeichenfolge sucht und dann die Rücktaste drückt, um ein Zeichen aus dem Suchbegriff zu entfernen, sollte für alle Elemente, die der Liste der Suchergebnisse dann wieder hinzugefügt werden, die Animation für das Hinzufügen zur Suchliste verwendet werden.
Das folgende Video zeigt die Animationen für das Hinzufügen und Entfernen von Elementen in einer Suchliste:
Weitere Ressourcen
Codebeispiele zur Verwendung der APIs für Ein- und Ausblendungsanimationen finden Sie unter HTML-Beispiel für die Animationsbibliothek.
Bewährte Methoden für den Entwurf mit diesen Animationen finden Sie unter Richtlinien und Prüfliste für Animationen für das Hinzufügen und Löschen.
Verwandte Themen
Animieren der Benutzeroberfläche