Package Exports

dom-morph

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dom-morph) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Install

Example

<div id='page' style='padding:10px'>
  <header id='title'>Page Title</header>
  <div id='body'>Body content</div>
  <button onclick='edit()'>Edit</button>
</div>

var morph = require('dom-morph')

window.edit = function(){
  var element = document.getElementById('page')

  var editor = document.createElement('div')
  editor.style.cssText = 'padding: 20px; background: silver; border: 1px solid gray'

  var nameInput = document.createElement('input')
  var bodyTextArea = document.createElement('textarea')
  editor.appendChild(nameInput)
  editor.appendChild(bodyTextArea)

  var saveButton = document.createElement('button')
  saveButton.textContent = 'Save'
  saveButton.onclick = function(){
    document.getElementById('title').textContent = nameInput.value
    document.getElementById('title').textContent = nameInput.value
    unmorph() // reverts to original element and removes new element
  }
  editor.appendChild(saveButton)

  var unmorph = morph(element, editor, 400, function(){
    console.log('morph complete')
  })
}

Run npm run example and navigate to http://localhost:9966 to see it in action.