Animation
up.morph(source, target, transitionOrName, [options])
function
experimental
This feature is experimental. It may be removed or changed in a future version without prior notice or deprecation.
Performs an animated transition between the source and target elements.
Transitions are implement by performing two animations in parallel,
causing source to disappear and the target to appear.
targetis inserted beforesourcesourceis removed from the document flow withposition: absolute. It will be positioned over its original place in the flow that is now occupied bytarget.- Both
sourceandtargetare animated in parallel sourceis removed from the DOM
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 that fulfills when the transition ends.