animateViewTransition (with fallback)

Author: hchiam

app/components/selection/delete.element.js

@@ -1,4 +1,5 @@
 import { DeleteStyles } from '../styles.store'
+import { animateViewTransition } from '../../utilities/'
 
 export class Delete extends HTMLElement {
   constructor() {
@@ -34,7 +35,7 @@ export class Delete extends HTMLElement {
     this.style.setProperty('--position', isFixed ? 'fixed' : 'absolute')
   }
 
-  deleteElement(e) {
+  async deleteElement(e) {
     e.preventDefault()
     e.stopPropagation()
 
@@ -44,6 +45,18 @@ export class Delete extends HTMLElement {
     }
 
     this.observers.forEach(observer => observer.disconnect())
+
+    const elements = [
+      this.targetElement,
+      ...this._linkedElementsToDeleteToo || [],
+      ...Array.from(document.querySelectorAll(`[data-label-id="${this.targetElement.getAttribute('data-label-id')}"]`)),
+      this
+    ]
+
+    await animateViewTransition(elements, () => this.performDeletion())
+  }
+
+  performDeletion() {
     this._linkedElementsToDeleteToo?.forEach(el => el.remove())
     this.targetElement.remove()
 

app/features/selectable.js

@@ -16,7 +16,7 @@ import {
   metaKey, htmlStringToDom, createClassname, camelToDash,
   isOffBounds, getStyle, getStyles, deepElementFromPoint, getShadowValues,
   isSelectorValid, findNearestChildElement, findNearestParentElement,
-  getTextShadowValues, isFixed, onRemove
+  getTextShadowValues, isFixed, onRemove, animateViewTransition
 } from '../utilities/'
 
 export function Selectable(visbug) {
@@ -159,8 +159,8 @@ export function Selectable(visbug) {
     e.preventDefault()
   }
 
-  const on_delete = e =>
-    selected.length && delete_all()
+  const on_delete = async e =>
+    selected.length && await delete_all()
 
   const on_clearstyles = e =>
     selected.forEach(el =>
@@ -497,29 +497,41 @@ export function Selectable(visbug) {
     !silent && tellWatchers()
   }
 
-  const delete_all = () => {
+  const delete_all = async () => {
     const selected_after_delete = selected.map(el => {
       if (canMoveRight(el))     return canMoveRight(el)
       else if (canMoveLeft(el)) return canMoveLeft(el)
       else if (el.parentNode)   return el.parentNode
     })
 
+    const elements = [
+      ...selected, 
+      ...labels, 
+      ...handles,
+      rotationBtn,
+      deleteBtn
+    ].filter(Boolean)
+
+    await animateViewTransition(elements, () => performDeletion())
+
+    selected_after_delete.forEach(el =>
+      select(el))
+  }
+
+  const performDeletion = () => {
     Array.from([
       ...selected, 
       ...labels, 
       ...handles,
       rotationBtn,
       deleteBtn
     ]).forEach(el => el.remove())
-
+    
     labels      = []
     handles     = []
     selected    = []
     rotationBtn = null
     deleteBtn   = null
-
-    selected_after_delete.forEach(el =>
-      select(el))
   }
 
   const expandSelection = ({query, all = false}) => {

app/utilities/common.js

@@ -131,4 +131,25 @@ export const onRemove = (element, callback) => {
   obs.observe(parent, {
     childList: true,
   })
+}
+
+export async function animateViewTransition(elements, callback) {
+  if (document.startViewTransition) {
+    const transition = document.startViewTransition(() => 
+      callback()
+    )
+    await transition.finished
+  } else {
+    const animations = elements.map(el => 
+      el.animate([
+        { opacity: 1, transform: 'scale(1)' },
+        { opacity: 0, transform: 'scale(0.95)' }
+      ], {
+        duration: 200,
+        easing: 'ease-out'
+      })
+    )
+    await Promise.all(animations.map(animation => animation.finished))
+    callback()
+  }
 }