feat: improve delay

playground/src/Playground.vue

@@ -40,12 +40,13 @@ const example = ref(vueBefore)
 const code = ref(example)
 const input = ref(code.value)
 const autoCommit = ref(true)
+const duration = ref(500)
 
 function reset() {
   if (lang.value === 'vue')
     example.value = example.value === vueBefore ? vueAfter : vueBefore
-  code.value = example.value
   input.value = example.value
+  code.value = example.value
 }
 
 function commit() {
@@ -92,7 +93,7 @@ watch(
 
 <template>
   <div class="h-screen flex flex-col font-sans max-h-screen">
-    <div class="flex flex-col items-center flex-none px4 pt6">
+    <div class="flex flex-col items-center flex-none px4 pt6 text-center">
       <span class="text-2xl font-200 bg-gradient-to-r from-teal to-orange inline-block text-transparent bg-clip-text">
         <span>Shiki</span>
         <span class="font-800 mx1">Magic</span>
@@ -105,27 +106,36 @@ watch(
         Working in progress. Repo is currently private, get early access by <a href="https://github.com/sponsors/antfu" target="_blank" class="underline hover:text-rose">sponsoring Anthony Fu</a>
       </div>
     </div>
-    <div class="grid grid-cols-2 p6 gap-4 flex-auto of-hidden">
+    <div class="grid md:grid-cols-2 p1 py6 md:p6 gap-4 flex-auto of-hidden">
       <div class="flex flex-col gap-2">
         <textarea
           v-model="input"
           class="font-mono w-full h-full flex-auto p-4 border border-gray:20 rounded bg-transparent"
           @keydown.meta.enter.prevent="commit"
         />
         <div class="flex-none flex flex-wrap gap-4 items-center">
-          <button class="border border-gray:20 rounded px2 py1" @click="reset">
+          <button class="border border-gray:20 rounded px3 py1" @click="reset">
             Reset Example
           </button>
           <label>
             <input
               v-model="autoCommit"
               type="checkbox"
             >
-            Auto Commit <sup v-if="!autoCommit" class="op50">(Cmd+Enter to commit)</sup>
+            Auto Commit
           </label>
-          <button v-if="!autoCommit" class="border border-gray:20 rounded px2 py1" @click="commit">
-            Commit
+          <button v-if="!autoCommit" class="border border-gray:20 rounded px3 py1" @click="commit">
+            Commit Changes
           </button>
+          <label class="flex gap-2">
+            Duration
+            <input
+              v-model="duration"
+              type="range" min="100" max="5000"
+              class="border border-gray:20 rounded px2 py1"
+            >
+            {{ duration }}ms
+          </label>
 
           <div class="flex-auto" />
           <select
@@ -161,6 +171,7 @@ watch(
           :code="code"
           :lang="lang"
           :theme="theme"
+          :animation="{ duration }"
           class="font-mono w-full h-full p-4 border border-gray:20 shadow-xl rounded max-h-full of-scroll"
         />
         <div

src/vue/StepAnimator.vue

@@ -14,8 +14,8 @@ const props = defineProps<{
 
 const {
   duration = 500,
-  delayMove = 0.1,
-  delayLeave = 0.1,
+  delayMove = 0.3,
+  delayLeave = 0,
   delayEnter = 0.8,
   easing = 'ease',
 } = props.animation || {}
@@ -41,8 +41,17 @@ const refTransitionGroup = ref<any>()
 const refContainer = computed(() => refTransitionGroup.value?.$el as HTMLPreElement | undefined)
 
 function savePosition(el: Element) {
+  RectMap.set(el as HTMLElement, getPosition(el))
+}
+
+function getPosition(el: Element) {
+  const { left: dLeft, top: dTop } = refContainer.value!.getBoundingClientRect()
+  const style = getComputedStyle(refContainer.value!)
   const { left, top } = el.getBoundingClientRect()
-  RectMap.set(el as HTMLElement, { left, top })
+  return {
+    left: left - dLeft - Number.parseInt(style.borderLeftWidth),
+    top: top - dTop - Number.parseInt(style.borderTopWidth),
+  }
 }
 
 function savePositions() {
@@ -52,7 +61,7 @@ function savePositions() {
 }
 
 function beforeLeave(el: Element | HTMLElement) {
-  const { left, top } = RectMap.get(el) || el.getBoundingClientRect()
+  const { left, top } = RectMap.get(el) || getPosition(el)
   if ('style' in el) {
     el.style.position = 'absolute'
     el.style.top = `${top}px`
@@ -94,8 +103,9 @@ onMounted(() => {
 
 <style scoped>
 .shiki-magic-move-container {
-  display: relative;
-  transition: all var(--duration) v-bind(easing);
+  position: relative;
+  white-space: pre;
+  overflow: scroll;
 }
 
 .shiki-magic-move-move, /* apply transition to moving elements */
@@ -107,10 +117,12 @@ onMounted(() => {
 
 .shiki-magic-move-move {
   transition-delay: calc(var(--duration) * v-bind(delayMove));
+  z-index: 1;
 }
 
 .shiki-magic-move-enter-active {
   transition-delay: calc(var(--duration) * v-bind(delayEnter));
+  z-index: 1;
 }
 
 .shiki-magic-move-leave-active {
@@ -119,7 +131,6 @@ onMounted(() => {
 
 .shiki-magic-move-item {
   display: inline-block;
-  transition: all var(--duration) v-bind(easing);
 }
 
 .shiki-magic-move-enter-from,

src/vue/types.ts

@@ -8,13 +8,13 @@ export interface AnimationOptions {
   /**
    * Ratio of the duration to delay the move animation
    *
-   * @default 0.1
+   * @default 0.3
    */
   delayMove?: number
   /**
    * Ratio of the duration to delay the leave animation
    *
-   * @default 0.1
+   * @default 0
    */
   delayLeave?: number
   /**