Skip to content

Instantly share code, notes, and snippets.

@andrewebdev
Created August 23, 2016 08:30
Show Gist options
  • Save andrewebdev/7d061acf556f130531281f57fd6cc57d to your computer and use it in GitHub Desktop.
Save andrewebdev/7d061acf556f130531281f57fd6cc57d to your computer and use it in GitHub Desktop.
// Get the bounding boxes and delta
var beforeFormBounds = beforeForm.getBoundingClientRect();
var formBounds = form.getBoundingClientRect();
var formDelta = formBounds.top - beforeFormBounds.top;
var beforeFormDelta = beforeFormBounds.top - formBounds.top;
// Move the dom node
this.insertBefore(form, beforeForm);
this._reIndexForms();
this.updateOrdering();
// Animate the transform
requestAnimationFrame(function() {
// Before the dom paints invert to it's old position
form.style.transform = 'translateY(' + beforeFormDelta + 'px)';
beforeForm.style.transform = 'translateY(' + formDelta + 'px)';
// Do the instant invert
form.style.transition = 'transform 0s';
beforeForm.style.transition = 'transform 0s';
// Now animate
requestAnimationFrame(function() {
form.style.transform = '';
form.style.transition = 'transform 500ms';
beforeForm.style.transform = '';
beforeForm.style.transition = 'transform 500ms';
}.bind(this));
}.bind(this));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment