dom-morph
Smoothly animate a DOM element swap from one to another. Great for in-place editors!
Uses CSS transitions for the animation so currently will only work in modern browsers.
API
var morph =
from
, to
, optionsOrDuration
, cb
)
morph(Smoothly replace from
element with to
element. Returns unmorph
function to reverts the change when called.
options
:
duration
: in milliseconds how long the morph animation should take to completefit
(defaultfalse
): When true, will scroll the window to ensure as much of the new element is visible. Specify a number to add a cushion of pixels around the edge of the element that also must be visibleanimate
: when false disables the animation and transitions in a single step
cb
will be called when animation completes.
optionsOrDuration
, cb
)
unmorph(Returned by morph
. Smoothly reverts back to original state.
after
, element
, optionsOrDuration
, cb
)
morph.after(element
is smoothly inserted after the element after
. Returns unmorph
function to revert.
element
, optionsOrDuration
, cb
)
morph.remove(element
is smoothly removed from DOM.
Example
Page Title Body content Edit
var morph = window{ var element = document var editor = document editorstylecssText = 'padding: 20px; background: silver; border: 1px solid gray' var nameInput = document var bodyTextArea = document editor editor var saveButton = document saveButtontextContent = 'Save' saveButton{ documenttextContent = nameInputvalue documenttextContent = bodyTextAreavalue // reverts to original element and removes new element } editor var unmorph = }
Run the example
$ npm install beefy -g$ npm run example