locked
Data Binding element updates with animations/transitions?

    Question

  • I have data bound table cells, that I would like to update with an animation instead of instant much like the listviews animations of items. The animation I have in mind is a transition of the old element to the left and the new element coming from the right, taking the old elements position. But for starters I would be happy with a blind/fade type of animation.

    Is this possible? I have no clue how to hook into the moment when the binding code updates the DOM tree.

    Friday, May 30, 2014 8:45 PM

All replies

  • Yes, I think that this is possible. When do you anticipate the animation happening - on item selection or something else?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, June 02, 2014 7:14 PM
    Moderator
  • Animation should happen, when the bound data changes.
    Monday, June 02, 2014 9:00 PM
  • To give you an example:

    <span data-win-bind="textContent:text"></span>

    observable.text = "Foo"

    should then set the spans text to "Foo"

    later I change the text

    observable.text = "Bar"

    Now I would like the old and new text to crossfade.

    I assume that is not built in, but could be done via a custom initializer, that places a clone of the span right on top of it and then uses

    WinJS.UI.Animation.crossFade(oldSpan,newSpan).then(function() {
      oldSpan.parentElement.removeChild(oldSpan);
    });

    Possible?

    Friday, June 13, 2014 2:23 PM