NativeScript Angular

RadListView Item Animations

RadListView supports animations for items being added or removed from the list. To be able to utilize this functionality, you will need to bind the module to an ObservableArray instance which makes sure any collection changes are reported to the RadListView module.

Enabling Item Animations

To enable item animations you first need to explicitly define item layout. More information about item layouts is available in the dedicated article: Item Layouts Animations. The code snippet below demonstrates how a ListViewLinearLayout is set, simply declare an ListViewLinearLayout instance and set the tkListViewLayout directive on it:

<ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" itemInsertAnimation="Default" itemDeleteAnimation="Default"></ListViewLinearLayout>

Note that the itemInsertAnimation and itemDeleteAnimation properties are set via bindings to Fade. This means that items being inserted or removed from the source collection will be animated using a fade-in or fade-out animation. There are four different animations that are currently available:

The currently available item animation types are defined by the ListViewItemAnimation enumeration.