WinJS animating Listview elements in Pivot control - similar to Email app

Question

I have been searching on this for few days and couldn't find any useful results.

Anyone know how to create animations of list view elements upon sliding pivot control similar to the email app?

Any help is much appreciated.

Answer 1

You can have 3 levels of delays in WinJS. Adding the delays is actually very simple. There are 3 CSS classes you can use. WinJS will handle the rest.

win-pivot-slide1, win-pivot-slide2 and win-pivot-slide3

To see the effect in the Pivot App (Windows Phone)-template you can edit the section3page.html for example. In that file there's a itemTemplate. Add the classes to that

<div class="itemTemplate"
     data-win-control="WinJS.Binding.Template">
    <div class="templatecontainer">
        <img class="win-pivot-slide1"
             src="#"
             data-win-bind="src: backgroundImage; alt: title" />
        <div class="itemcontainer">
            <div class="itemtitle label-extralarge win-pivot-slide2"
                 data-win-bind="textContent: title"></div>
            <div class="label-mediummid win-pivot-slide3"
                 data-win-res="{ textContent: 'Section3Description' }"
                 style="height: 82px;"></div>
        </div>
    </div>
</div>

The speed of the animation seems to be hardcoded and can't be set through a property of function.