locked
How to animate multiple items in listview?

    Question

  • This article shows how to animate a listview item:

    http://msdn.microsoft.com/en-us/library/windows/apps/jj244627.aspx#adding_listview_item_animations

    I tried it and it's working fine. The problem is that it's animating only the first item in the listview. I want to animate the other items also. How can I do this?

    P.S. Need answers in html version only.

    Sunday, October 12, 2014 1:17 PM

Answers

  • Thanks for this. It's actually what I was looking for :) Though I searched Stackoverflow forums before posting, but maybe I missed that one... Anyway, I just tried it and it's working great. I made all the items animate this way:

        function changeImage() {
            // Get the two image elements
            var myItem = document.querySelectorAll(".item");

            for (var i = 0 ; i < myItem.length; i++) {
                var images = myItem[i].querySelector(".item-image");
                var imagesNew = myItem[i].querySelector(".item-image-new");

                // Swap out the old image source and choose the new image source
                images.src = imagesNew.src;
                if (images.src == lightGray)
                    imagesNew.src = mediumGray;
                else if (images.src == mediumGray)
                    imagesNew.src = darkGray;
                else
                    imagesNew.src = lightGray;

                // Reset the elements for the pre-animation position and trigger the animation
                images.style.top = "0px";
                imagesNew.style.top = "250px";
                peekTile(images, imagesNew);
            }
       };


    • Marked as answer by bliks07 Sunday, October 12, 2014 3:43 PM
    Sunday, October 12, 2014 3:43 PM

All replies

  • Hello,

    this might be helpful 

    [1] http://stackoverflow.com/questions/16397990/listview-item-animations-windows-store-app

    Regards,
    Markus Kocybik     
    Entwickler-Hotline for MSDN Online Germany

    Disclaimer:
    Please take into consideration, that further inquiries cannot or will be answered with delay.
    For further information please contact us per telephone through the MSDN-Entwickler-Hotline: http://www.msdn-online.de/Hotline
    App-Entwickler-Hotline: Fast and professional help for software developers free of charge!

    For this post by the MSDN-Entwickler-Hotline the following terms and conditions apply: Trademarks, Privacy as well as the separate terms of use for the MSDN-Entwickler-Hotline.

    Sunday, October 12, 2014 1:58 PM
  • Thanks for this. It's actually what I was looking for :) Though I searched Stackoverflow forums before posting, but maybe I missed that one... Anyway, I just tried it and it's working great. I made all the items animate this way:

        function changeImage() {
            // Get the two image elements
            var myItem = document.querySelectorAll(".item");

            for (var i = 0 ; i < myItem.length; i++) {
                var images = myItem[i].querySelector(".item-image");
                var imagesNew = myItem[i].querySelector(".item-image-new");

                // Swap out the old image source and choose the new image source
                images.src = imagesNew.src;
                if (images.src == lightGray)
                    imagesNew.src = mediumGray;
                else if (images.src == mediumGray)
                    imagesNew.src = darkGray;
                else
                    imagesNew.src = lightGray;

                // Reset the elements for the pre-animation position and trigger the animation
                images.style.top = "0px";
                imagesNew.style.top = "250px";
                peekTile(images, imagesNew);
            }
       };


    • Marked as answer by bliks07 Sunday, October 12, 2014 3:43 PM
    Sunday, October 12, 2014 3:43 PM