Fix #12: Animate items when moved or removed

Author: bhch

src/components/containers.js

@@ -11,13 +11,68 @@ export function GroupTitle(props) {
 }
 
 
+function animate(e, animation, callback) {
+    let el = e.target.parentElement.parentElement;
+    let prevEl = el.previousElementSibling;
+    let nextEl = el.nextElementSibling;
+
+    el.classList.add('rjf-animate', 'rjf-' + animation);
+
+    if (animation === 'move-up') {
+        let {y, height} = prevEl.getBoundingClientRect();
+        let y1 = y, h1 = height;
+        
+        ({y, height} = el.getBoundingClientRect());
+        let y2 = y, h2 = height;
+        
+        prevEl.classList.add('rjf-animate');
+
+        prevEl.style.opacity = 0;
+        prevEl.style.transform = 'translateY(' + (y2 - y1)  + 'px)';
+
+        el.style.opacity = 0;
+        el.style.transform = 'translateY(-' + (y2 - y1)  + 'px)';
+
+    } else if (animation === 'move-down') {
+        let {y, height} = el.getBoundingClientRect();
+        let y1 = y, h1 = height;
+        
+        ({y, height} = nextEl.getBoundingClientRect());
+        let y2 = y, h2 = height;
+        
+        nextEl.classList.add('rjf-animate');
+
+        nextEl.style.opacity = 0;
+        nextEl.style.transform = 'translateY(-' + (y2 - y1)  + 'px)';
+
+        el.style.opacity = 0;
+        el.style.transform = 'translateY(' + (y2 - y1)  + 'px)';
+    }
+
+    setTimeout(function() {
+        callback();
+        
+        el.classList.remove('rjf-animate', 'rjf-' + animation);
+        el.style = null;
+
+        if (animation === 'move-up') {
+            prevEl.classList.remove('rjf-animate');
+            prevEl.style = null;
+        }
+        else if (animation === 'move-down') {
+            nextEl.classList.remove('rjf-animate');
+            nextEl.style = null;
+        }
+    }, 200);
+}
+
 export function FormRowControls(props) {
     return (
         <div className="rjf-form-row-controls">
             {props.onMoveUp &&
                 <Button 
                     className="move-up"
-                    onClick={props.onMoveUp}
+                    onClick={(e) => animate(e, 'move-up', props.onMoveUp)}
                     title="Move up"
                 >
                     <span>&uarr;</span>
@@ -26,7 +81,7 @@ export function FormRowControls(props) {
             {props.onMoveDown &&
                 <Button 
                     className="move-down"
-                    onClick={props.onMoveDown}
+                    onClick={(e) => animate(e, 'move-down', props.onMoveDown)}
                     title="Move down"
                 >
                     <span>&darr;</span>
@@ -35,7 +90,7 @@ export function FormRowControls(props) {
             {props.onRemove &&
                 <Button 
                     className="remove"
-                    onClick={props.onRemove}
+                    onClick={(e) => animate(e, 'remove', props.onRemove)}
                     title="Remove"
                 >
                     <span>&times;</span>