removeWithTransition.ts

removeWithTransition.ts

function insertWithTransition(el: HTMLElement, activeClass = 'is-active') {
  el.classList.remove(activeClass);

  setTimeout(() => {
    el.classList.add(activeClass);
  }, 0);
}

function removeWithTransition(el: HTMLElement, activeClass = 'is-active') {
  const clone = el.cloneNode(true) as HTMLDivElement;
  el.parentElement!.insertBefore(clone, el);

  clone.addEventListener('transitionend', () => clone.remove());
  clone.classList.add(activeClass);

  setTimeout(() => {
    clone.classList.remove(activeClass);
  }, 0);
}

// .my-thing {
//   position: fixed;
//   inset: 0;
//   z-index: 1;
//   will-change: top, left, width, height, font-size;
//   transition-property: top, left, width, height, font-size;
//   transition-timing-function: ease-in-out;
//   transition-duration: 200ms;
// }

// .my-thing.is-active {
//   top: var(--margin);
//   left: var(--margin);
//   width: calc(100dvw - var(--margin) * 2);
//   height: calc(100dvh - var(--margin) * 2);
// }