Creating a Transition

Key Points

• Durandal's composition mechanism can use a transition to animate DOM changes.
• Create transitions by adding a module at durandal/transitions/{your-transition-name}.
• A transition module is a function with the following signature function(parent, newChild, settings):promise.
• Versatile transitions need to take view caching into consideration. :::

Explanation

A transition is a module which handles the adding and removing of views from the DOM. Once the composition mechanism has located and bound views, it will call into a transition to update the DOM, if one is configured. Configuring a transition is done by setting the transition property of the compose binding to a valid transition name. The name provided is used to resolve a module at the path durandal/transitions/{your-transition-name}. This module is expected to be a function module with the following signature: function(parent, newChild, settings):promise. This function should display the newChild in the parent element and return a promise which it resolves after it's animation sequence is complete. Implementing a versatile transition can be a bit tricky, as several important factors need to be considered:

• There may not be a new view to show, only an old one to animate out.
• There may be an active view to animate out (settings.activeView).
• The composition settings may have been configured to cach views (settings.cacheViews).
• The current view being composed, may already be in the DOM and may not be a new view...or it may (settings.composingNewView).

A versatile transition must support all these possibilities. For an example of this, see the entrance transition that is provided. Also, see this gist for a sample animation helper that makes it really easy to build css3-based transitions quickly and easily.