Animated list

This example shows how to use AddingAnimation and RemovingAnimation to animate items being added and removed in a list. LayoutAnimation is used to adjust the position of the other list items inside the StackPanel.

The markup

<App Background="#eee">
            var Observable = require("FuseJS/Observable");
            var items = Observable();

            function addItem() {
                items.add({ text: "This is an item" });

            function removeItem(sender) {

            module.exports = {
                items: items,
                addItem: addItem,
                removeItem: removeItem

        <StatusBarBackground Dock="Top" />
        <Basic.Button Text="Add item" Clicked="{addItem}" Dock="Top" />
                <Each Items="{items}">
                    <DockPanel Padding="10" Margin="0,1" Background="#fff">
                        <Text Value="{text}" Alignment="CenterLeft" />
                        <Basic.Button Text="Delete" Clicked="{removeItem}" Dock="Right" />

                            <Move RelativeTo="LayoutChange" Y="1" Duration="0.8" Easing="ElasticIn" />

                            <Move RelativeTo="Size" X="1" Duration="0.3" Easing="CircularIn" />

                            <Move RelativeTo="Size" X="-1" Duration="0.4" Easing="CircularOut" />