up.motion up.transition(name, transition)

JavaScript function

Defines a named transition that morphs from one element to another.

Example

Here is the definition of the pre-defined cross-fade animation:

up.transition('cross-fade', function(oldElement, newElement, options) {
  return Promise.all([
    up.animate(oldElement, 'fade-out', options),
    up.animate(newElement, 'fade-in', options)
  ])
})

Callback contract

For animations that can be expressed through CSS transitions, we recomend that your definitions end by calling up.animate() with an object argument, passing along your options and returning the result.

If you choose to not use up.animate() and roll your own logic instead, your code must honor the following contract:

1. It must honor the options { duration, easing } if given.
2. It must not remove any of the given elements from the DOM.
3. It returns a promise that is fulfilled when the transition has ended.
4. If during the animation an event up:motion:finish is emitted on either element, the transition instantly jumps to the last frame and resolves the returned promise.

Calling up.animate() with an object argument will take care of all these points.