Animation
up.morph(source, target, transitionOrName, [options])
function
Performs an animated transition between two elements. Transitions are implement by performing two animations in parallel, causing one element to disappear and the other to appear.
Note that the transition does not remove any elements from the DOM.
The first element will remain in the DOM, albeit hidden using display: none.
Named transitions
The following transitions are pre-defined:
cross-fade |
Fades out the first element. Simultaneously fades in the second element. |
move-up |
Moves the first element upwards until it exits the screen at the top edge. Simultaneously moves the second element upwards from beyond the bottom edge of the screen until it reaches its current position. |
move-down |
Moves the first element downwards until it exits the screen at the bottom edge. Simultaneously moves the second element downwards from beyond the top edge of the screen until it reaches its current position. |
move-left |
Moves the first element leftwards until it exists the screen at the left edge. Simultaneously moves the second element leftwards from beyond the right edge of the screen until it reaches its current position. |
move-right |
Moves the first element rightwards until it exists the screen at the right edge. Simultaneously moves the second element rightwards from beyond the left edge of the screen until it reaches its current position. |
none |
A transition that has no visible effect. Sounds useless at first, but can save you a lot of if statements. |
You can define additional named transitions using up.transition().
You can also compose a transition from two named animations.
separated by a slash character (/):
move-to-bottom/fade-inmove-to-left/move-from-top
Implementation details
During a transition both the old and new element occupy the same position on the screen.
Since the CSS layout flow will usually not allow two elements to overlay the same space, Unpoly:
- The old and new elements are cloned
- The old element is removed from the layout flow using
display: hidden - The new element is hidden, but still leaves space in the layout flow by setting
visibility: hidden - The clones are absolutely positioned over the original elements.
- The transition is applied to the cloned elements. At no point will the hidden, original elements be animated.
- When the transition has finished, the clones are removed from the DOM and the new element is shown. The old element remains hidden in the DOM.
Parameters
The duration of the animation, in milliseconds.
The delay before the animation starts, in milliseconds.
The timing function that controls the transition's acceleration.
See W3C documentation for a list of pre-defined timing functions.
Whether to reveal the new element by scrolling its parent viewport.
Return value
A promise for the transition's end.