Animate ListBlock / StreamBlock insertion controls on insert/delete

This reduces the jumpiness on insertion and deletion. For nested sequences, it's not possible to eliminate the jump entirely without editing the CSS, because the insert button is `display: inline-block` which gives it a minimum height of the containing block's line-height - as a result, this spacing appears immediately as soon as the block changes from display:none to visible.

client/src/components/StreamField/blocks/BaseSequenceBlock.js

@@ -156,8 +156,12 @@ export class BaseInsertionControl {
     this.index = newIndex;
   }
 
-  delete() {
-    $(this.element).hide().attr('aria-hidden', 'true');
+  delete({ animate = false }) {
+    if (animate) {
+      $(this.element).slideUp().attr('aria-hidden', 'true');
+    } else {
+      $(this.element).hide().attr('aria-hidden', 'true');
+    }
   }
 }
 
@@ -252,6 +256,7 @@ export class BaseSequenceBlock {
           this._onRequestInsert(newIndex, inserterOpts);
         },
         strings: this.blockDef.meta.strings,
+        animate,
       }
     );
     this.inserters.splice(index + 1, 0, inserter);
@@ -281,7 +286,7 @@ export class BaseSequenceBlock {
   deleteBlock(index, opts) {
     const animate = opts && opts.animate;
     this.children[index].markDeleted({ animate });
-    this.inserters[index].delete();
+    this.inserters[index].delete({ animate });
     this.children.splice(index, 1);
     this.inserters.splice(index, 1);
 

client/src/components/StreamField/blocks/ListBlock.js

@@ -33,6 +33,7 @@ class InsertPosition extends BaseInsertionControl {
   constructor(placeholder, opts) {
     super(placeholder, opts);
     this.onRequestInsert = opts && opts.onRequestInsert;
+    const animate = opts && opts.animate;
 
     const button = $(`
       <button type="button" title="${h(opts.strings.ADD)}" data-streamfield-list-add
@@ -48,6 +49,10 @@ class InsertPosition extends BaseInsertionControl {
         this.onRequestInsert(this.index);
       }
     });
+
+    if (animate) {
+      button.hide().slideDown();
+    }
   }
 }
 

client/src/components/StreamField/blocks/StreamBlock.js

@@ -38,6 +38,7 @@ class StreamBlockMenu extends BaseInsertionControl {
   constructor(placeholder, opts) {
     super(placeholder, opts);
     this.groupedChildBlockDefs = opts.groupedChildBlockDefs;
+    const animate = opts.animate;
 
     const dom = $(`
       <div>
@@ -65,6 +66,9 @@ class StreamBlockMenu extends BaseInsertionControl {
     this.canAddBlock = true;
     this.disabledBlockTypes = new Set();
     this.close({ animate: false });
+    if (animate) {
+      dom.hide().slideDown();
+    }
   }
 
   renderMenu() {