js/enterPage.js)

js/enterPage.js) provides a choice of how many elements are animated separately: switch (pageSections) { case "1": // Animate the whole page together enterPage = WinJS.UI.Animation.enterPage(rootGrid); break; case "2": // Stagger the header and body enterPage = WinJS.UI.Animation.enterPage([[header, featureLabel], [contentHost, footer]]); break; case "3": // Stagger the header, input, and output areas enterPage = WinJS.UI.Animation.enterPage([[header, featureLabel], [inputLabel, input], [outputLabel, output, footer]]); break; } When the element argument is an array, the offset argument, if provided, can be either a single offset that is applied to all elements, or an array to indicate individual offsets for each element. Each offset is an object whose properties that define the offset. See js/dragBetween.js for Scenario 13 where this is used with the dragBetweenEnter animation: WinJS.UI.Animation.dragBetweenEnter([box1, box2], [{ top: "-40px", left: "0px" }, { top: "40px", left: "0px" }]); Here’s a modification showing a single offset that’s applied to both elements: WinJS.UI.Animation.dragBetweenEnter([box1, box2], { top: "0px", left: "40px" }); Scenario 4 (js/transitioncontent.js) shows how you can chain a couple of promises together to transition between two different blocks of content: 55 WinJS.UI.Animation.exitContent(outgoing, null).done( function () { outgoing.style.display = "none"; incoming.style.display = "block"; return WinJS.UI.Animation.enterContent(incoming, null); }); Things get a little more interesting when we look at the create* animation methods, together referred to as the layout animations, which are for adding and removing items from lists, expanding and collapsing content, and so forth. Each of these has a three-step process where you create the animation, manipulate the DOM, and then execute the animation, as shown in Scenario 7 (js/addAndDeleteFromList.js): 55 Note that the actual sample passes a variable output as the first parameter to exitContent and enterContent; the code should appear as shown here, with outgoing being passed to exitContent and incoming passed to enterContent. 476

Create addToList animation. var addToList = WinJS.UI.Animation.createAddToListAnimation(newItem, affectedItems); // Insert new item into DOM tree. This causes the affected items to change position. list.insertBefore(newItem, list.firstChild); // Execute the animation. addToList.execute(); The reason for the three-step process is that in order to carry out the animation on newly added items, or items that are being removed, they all need to be in the DOM when the animation executes. The process here lets you create the animation with the initial state of everything, manipulate the DOM (or just set styles and so forth) to create the ending state, and then execute the animation to “let ‘er rip.” You can then use the done method on the promise returned from execute to perform any final cleanup. Scenario 5 (js/expandAndCollapse.js) makes this point clear: // Create collapse animation. var collapseAnimation = WinJS.UI.Animation.createCollapseAnimation(element, affected); // Remove collapsing item from document flow so that affected items reflow to their new // position. Do not remove collapsing item from DOM or display at this point, otherwise the // animation on the collapsing item will not display. element.style.position = "absolute"; element.style.opacity = "0"; // Execute collapse animation. collapseAnimation.execute().done( // After animation is complete (or on error), remove from display. function () { element.style.display = "none"; }, function () { element.style.display = "none"; } ); As a final example—because I know you’re smart enough to look at most of the other cases on your own—Scenario 21 (js/customAnimation.js) shows how to use the WinJS.UI.executeAnimation and WinJS.UI.executeTransition methods. function runCustomShowAnimation() { var showAnimation = WinJS.UI.executeAnimation( target, { // Note: this keyframe refers to a keyframe defined in customAnimation.css. // If it's not defined in CSS, the animation won't work. keyframe: "custom-opacity-in", property: "opacity", delay: 0, duration: 500, timing: "linear", from: 0, to: 1 } ); } 477