<div style="position: relative; height: 66vh; width: 50vw; margin: 1em; border: 1px solid var(--kendo-color-border); overflow: auto;">
    <TelerikAnimationContainer @ref="AnimationContainerRef1"
                            AnimationDuration="@AnimationDuration12"
                            AnimationType="@AnimationType1"
                            Height="auto"
                            Left="0"
                            Top="0"
                            Width="100%">
        <TelerikListView Data="@ListItems1">
            <Template>
                @{ var dataItem = (ListItem)context; }
                <div class="list-item k-m-sm k-px-sm k-py-sm k-d-flex k-justify-content-between k-align-items-center k-rounded-md"
                     @onclick="@(() => GoTo2(dataItem.Id))">
                    <span>@dataItem.Text</span>
                    <TelerikSvgIcon Icon="@SvgIcon.ChevronRight" />
                </div>
            </Template>
        </TelerikListView>
    </TelerikAnimationContainer>

    <TelerikAnimationContainer @ref="AnimationContainerRef2"
                            AnimationDuration="@AnimationDuration12"
                            AnimationType="@AnimationType2"
                            Height="auto"
                            Left="0"
                            Top="0"
                            Width="100%">
        <TelerikListView Data="@ListItems2.Where(li => li.ParentId == SelectedRootItemId)">
            <Template>
                @{ var dataItem = (ListItem)context; }
                <div class="list-item k-m-sm k-px-sm k-py-sm k-d-flex k-justify-content-between k-align-items-center k-rounded-md"
                     @onclick="@GoTo1">
                    <span>@dataItem.Text</span>
                </div>
            </Template>
        </TelerikListView>
    </TelerikAnimationContainer>
</div>

<style>
    .list-item {
        background: var(--kendo-color-base);
        cursor: pointer;
    }
    .list-item:hover {
        background: var(--kendo-color-base-hover);
    }
</style>

@code {
    #nullable enable

    private TelerikAnimationContainer? AnimationContainerRef1;
    private AnimationType AnimationType1 { get; set; } = AnimationType.None;
    private TelerikAnimationContainer? AnimationContainerRef2;
    private AnimationType AnimationType2 { get; set; } = AnimationType.SlideLeft;
    private int AnimationDuration12 { get; set; }

    private List<ListItem> ListItems1 { get; set; } = new();
    private List<ListItem> ListItems2 { get; set; } = new();

    private int SelectedRootItemId { get; set; }

    private async Task GoTo2(int rootItemId)
    {
        SelectedRootItemId = rootItemId;

        if (AnimationContainerRef1 is not null && AnimationContainerRef2 is not null)
        {
            await AnimationContainerRef2.ShowAsync();
            await Task.Delay(1);
            await AnimationContainerRef1.HideAsync();
        }
    }

    private async Task GoTo1()
    {
        if (AnimationContainerRef1 is not null && AnimationContainerRef2 is not null)
        {
            await AnimationContainerRef1.ShowAsync();
            await Task.Delay(1);
            await AnimationContainerRef2.HideAsync();
        }
    }

    private int LastId { get; set; }

    protected override void OnInitialized()
    {
        ListItems1 = new List<ListItem>();
        ListItems2 = new List<ListItem>();

        for (int i = 1; i <= 48; i++)
        {
            int rootItemId = ++LastId;
            ListItems1.Add(new ListItem()
            {
                Id = rootItemId,
                Text = $"Root Item {i}",
                Category = $"Category {i % 6 + 1}"
            });

            for (int j = 1; j <= 7; j++)
            {
                ListItems2.Add(new ListItem()
                {
                    Id = ++LastId,
                    ParentId = rootItemId,
                    Text = $"Child Item {i}-{j}"
                });
            }
        }

        base.OnInitialized();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            if (AnimationContainerRef1 is not null)
            {
                await AnimationContainerRef1.ShowAsync();
                await Task.Delay(1);
                AnimationType1 = AnimationType.SlideRight;
                AnimationDuration12 = 300;
            }
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public class ListItem
    {
        public int Id { get; set; }
        public int? ParentId { get; set; }
        public string Text { get; set; } = string.Empty;
        public string Category { get; set; } = string.Empty;
    }
}