Grid App template: why handle "contentanimating" event in updateLayout: function?


  • (1) File | New Project ... | Template=JavaScript => Grid App template

    (2) Open groupDetail.js, look at lines 39-57:

            // This function updates the page layout in response to viewState changes.
            updateLayout: function (element, viewState, lastViewState) {
                /// <param name="element" domElement="true" />
                var listView = element.querySelector(".itemslist").winControl;
                if (lastViewState !== viewState) {
                    if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
                        var handler = function (e) {
                            listView.removeEventListener("contentanimating", handler, false);
                        listView.addEventListener("contentanimating", handler, false);
                        var firstVisible = listView.indexOfFirstVisible;
                        this._initializeLayout(listView, viewState);
                        if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
                            listView.indexOfFirstVisible = firstVisible;

    I'm confused about the purpose of adding an event listener for "contentanimating" ... it seems that the only thing the handler (defined in the anonymous method above it) is attempting to do is first DISABLE the event listener then call preventDefault().  This happens when the ViewState changes to "snapped".

    SO what is it about the "contentanimating" event that we're trying to mitigate by calling e.preventDefault()?  Is it some default animation that we're attempting to stop in its tracks?  My attempts at finding documentation on this haven't been successful, so any insight would be most appreciated!

    • Edited by BobTaborMVP Monday, September 03, 2012 5:26 PM clarifying my question
    Monday, September 03, 2012 5:24 PM


  • You nailed it.

    If we are going to a snapped view or coming from a snapped view, we don't want to display the page entrance animation!

    You can actually see this.  Click on the header for one of the groups you will see the page entrance animation.

    Then put a bp on that e.preventDefault().

    Snap the view... you see we hit it and there is no page animation.

    Un snap and again...  you see we hit it and there is no page animation.


    Jeff Sanders (MSFT)

    Tuesday, September 04, 2012 7:57 PM

All replies