locked
createDeleteFromListAnimation problem

    Question

  • I've tried to use createDeleteFromListAnimation when removing a child of a ul element.

    var deleteAnim = WinJS.UI.Animation.createDeleteFromListAnimation(deleted, remaining);
    deleted.style.position = "fixed";
    deleted.style.opacity = "0";
    deleteAnim.execute().then(function (){
        deleted.parentNode.removeChild(deleted);
    });

    The position of ul is fixed, at the bottom of the screen, which means that if a child is removed from ul, all sibilings after it should not be moved. But unfortunately all sibilings will be moved indeed. I guess the reason is that createDeleteFromListAnimation seems to be designed only for top-down list.

    I've tried to modify the deleteAnim.offsetArray, but it didn't work.

    Could you give me some advise? Thanks a lot.

    Thursday, December 19, 2013 9:33 AM

Answers

  • Hi PolarisRhapsody,

    Thank you for clarify the question, and I do think you can set the position of the list by following code, it works fine in my test environment, the idea is to set the alignment coordinate as bottom instead of the top by default:

    The animation js code:

                var deletedItem = listItems[1];
                deletedItem.setAttribute("deleting", true);
                var affectedItems = document.querySelectorAll(".listItem:not([deleting])");
    
                // Create deleteFromList animation.
                var deleteFromList = WinJS.UI.Animation.createDeleteFromListAnimation(deletedItem, affectedItems);
    
                // Take deletedItem out of the regular document layout flow so remaining list items will change position in response.
                deletedItem.style.position = "relative";
                // Set deletedItem to its final visual state (hidden).
                deletedItem.style.opacity = "0";
    
                // Execute deleteFromList animation, then clean up.
                deleteFromList.execute().done(
                    // After animation is complete, remove item from the DOM tree.
                    function () { list.removeChild(deletedItem); });

    The CSS for the container list:

    #list { //set position as fixed, the code cannot be display in the forum, i dont know why

    bottom:20px; }


    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.




    Tuesday, December 24, 2013 4:22 PM
    Moderator

All replies

  • Hi PolarisRhapsody,

    I'm not sure if I totally understand your issue, I would like to say if a demo is provided, it could be better. And I don't think createDeleteFromListAnimation is only designed for top-down, see the documentation: http://msdn.microsoft.com/en-us/library/windows/apps/br212656.aspx. The video shows the demo that can achieve left-right animation.

    And I paste some code below, I'm not quite understand why you set deleted.style.position and opacity.

    // Step 1: Create the animation object and save the result
    var anim = WinJS.UI.Animation.createAddToListAnimation(added, affected);
    
    // Step 2: Insert the element given in the added parameter immediately before
    // the element given in the affected parameter. This causes both elements to move.
    affected.parentNode.insertBefore(added, affected);
    
    // Step 3: Execute the animation
    anim.execute();
    
    // Step 4: When animation completes, remove the deleted items from the screen
    anim.execute().then(function(){ deleted.parentNode.removeChild(deleted); });
    
    

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, December 20, 2013 6:57 AM
    Moderator
  • Thank you for your reply. In fact I've read this document before but unfortunately it didn't work.

    I've got a list with fixed position at the bottom of the screen, like this:

        item1

        item2

        item3

        item4

    __(screen bottom)__

    My purpose is that item1 should move down with animation and item3&4 do nothing when I delete item2. But createDeleteFromListAnimation didn't work like that. Do you have some more adive?

    Tuesday, December 24, 2013 1:25 AM
  • Hi PolarisRhapsody,

    Thank you for clarify the question, and I do think you can set the position of the list by following code, it works fine in my test environment, the idea is to set the alignment coordinate as bottom instead of the top by default:

    The animation js code:

                var deletedItem = listItems[1];
                deletedItem.setAttribute("deleting", true);
                var affectedItems = document.querySelectorAll(".listItem:not([deleting])");
    
                // Create deleteFromList animation.
                var deleteFromList = WinJS.UI.Animation.createDeleteFromListAnimation(deletedItem, affectedItems);
    
                // Take deletedItem out of the regular document layout flow so remaining list items will change position in response.
                deletedItem.style.position = "relative";
                // Set deletedItem to its final visual state (hidden).
                deletedItem.style.opacity = "0";
    
                // Execute deleteFromList animation, then clean up.
                deleteFromList.execute().done(
                    // After animation is complete, remove item from the DOM tree.
                    function () { list.removeChild(deletedItem); });

    The CSS for the container list:

    #list { //set position as fixed, the code cannot be display in the forum, i dont know why

    bottom:20px; }


    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.




    Tuesday, December 24, 2013 4:22 PM
    Moderator
  • Thank you for your solution. I tried it in my app. But I think the animation of item1 didn't work well. Item1 fell down when item2 disappeared with no animation.
    Wednesday, December 25, 2013 12:52 AM
  • Oops, I modified something and forgot to change back, set the deletedItem.style.position from "relative" to "fixed" should be ok.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Wednesday, December 25, 2013 1:05 AM
    Moderator