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:

Example 1: Enabling item animations on RadListView:

<lv:RadListView items="{{ dataItems }}" row="1" id="ls">
    <lv:RadListView.listViewLayout>
         <lv:ListViewLinearLayout scrollDirection="Vertical" itemInsertAnimation="Default" itemDeleteAnimation="Default"/>
    </lv:RadListView.listViewLayout>
    <lv:RadListView.itemTemplate>
        <StackLayout orientation="vertical">
            <Label fontSize="20" text="{{ _itemName }}"/>
            <Label fontSize="14" text="{{ _itemDescription }}"/>
        </StackLayout>
    </lv:RadListView.itemTemplate>
 </lv:RadListView>

Note how the itemInsertAnimation and itemDeleteAnimation properties are set 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:

• Default
• Fade
• Scale
• Slide

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

References

Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

• Item Animations Example