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.

Answer 1

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.

Answer 2

Animation should happen, when the bound data changes.

Answer 3

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?