Animation in ListViews

Question

Hi all,

I am designing an app which has a page that has tow list views. Lets call them "MainListView" and "SecondaryListView". the two list views are placed side by side ("MainListView" is on left and "SecondaryListView" is on right). The data in these two lists is a parent child data from a Web API.

Scenario 1:

The flow is like below:

1. When page is initialized initial parent data is present in data is present "SecondaryListView" (level 1 data).

2.User clicks one item in the "SecondaryListView". The Data clicked is moved to "MainListView" and the "SecondaryListView" now gets updated by the child o selected item.

3. This sequence goes on till the last child is reached.

Scenario 2:

Lets say the user has gone to 5th level. The 1st, 2nd, 3rd, 4th, 5th level selected data is there in "MainListView" and "SecondaryListView" has the childrens of 5th selected data.

1. Now users selects the 2nd level selected data in "MainListView".

2. The 3rd, 4th, 5th level data gets deleted from "MainListView" and the "SecondaryListView" gets filled with children of 2nd level.

My requirement is that I need to add some animation. Here is the animation that is desired:

1. In Scenario 1 when user selects one item from "SecondaryListView" the item to slide towards the "MainListView" and get added at bottom of the list. Currently it is just getting added. There is no slide animation.

2. In Scenario  2 when user selects one item from "MainListView", the other elements that gets deleted (in example 3rd, 4th, 5th) should slide down the list and disappear. Currently the sliding and deletion animation is not getting achieved.

Both my list use binding for data and use template. The functionality is fully working baring the animation that is desired. Currently if I change the binding data the functionality works but the animation is something I am not able to get it working.

Any suggestions would be helpful.

- Girija

Answer 1

In your scenario, can the user navigate back up?

I can help you with CSS3 transitions and animations, but it might be helpful to see a little of your HTML source code.

---

Michael Palermo Microsoft Evangelist

Answer 2

Hi,

Thanks for responding.

I could not understand what you mean by backup.

I cannot share the code with you , but it is simple. The main list is a list view (List Layout) and the secondary list is a list view (Grid Layout).

If you still want the code, I can create a sample and upload to skydrive.

- Girija

Answer 3

have you checked the list view animations using css3 and WinJS library?

check this link

http://msdn.microsoft.com/en-us/library/windows/apps/hh465237.aspx

Answer 4

Hi Vivek,

I did see that, but what I need is a very specific type of animation, so these do not work for my case. Also all these animation typically work for within the list itself, but what I need is a cross list animation (please see my initial mail), so it does not work.

- Girija

Answer 5

hmm,for this type scenarios we can do like

we should create dynamic DIV which can be looks like similar to the list item in list view and move that along with mouse coordinates on mouse click event is fired in first list and add those details in second list once mouse up event fired in second list.then make that dynamic div disappear.