Animating list additions and deletions (HTML)
Use list animations to show changes to a collection of similar items. This includes both add and delete animations. Note that the term "list" here encompasses more than the standard grocery list form; for example, a grid. These animations provide a smooth visual transition for the entry or exit of items, which makes it obvious to the user what has happened. During an add animation, existing items slide out of the way to make space for the new item. The new item then fades into the space, scaling up as it does so. A delete animation is the reverse.
This set of animations consists of the following APIs:
- createAddToListAnimation
- createDeleteFromListAnimation
- createAddToSearchListAnimation
- createDeleteFromSearchListAnimation
Add/Delete from list animations
Use list animations to show the insertion or deletion of items in a collection of similar items. These animations differ from the add/delete from search list animations in that the search animations are somewhat faster, to accommodate the filtering of search results as the user enters the search term.
The following video demonstrates the animations that add and remove items from a list:
Add/Delete from search list animations
Use the search list animations when items in a list are changing quickly as part of a search scenario. This set of animations differs in timing from the animations for adding and deleting from lists. The search list animations respond more quickly to scenarios such as continuous filtering. For example, as a user enters a search term to search for an item in a list, and that list filters the results in real time, the items that are filtered out should use the delete-from-search list animation. Conversely, if a user searches for a string and then hits the backspace key to remove a character from the search term, any items that are then added back to the list of search results should use the add-to-search list animation.
The following video demonstrates the animations that add and remove items from a search list:
Other resources
For code examples that demonstrate the use of the fade animation APIs, see the HTML animation library sample.
For design best practices in the use of these animations, see Guidelines and checklist for add and delete animations.