From 9bbb376de7495439d181ee74f22398daa23acdd6 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sat, 28 Jun 2025 17:49:29 +0800
Subject: [PATCH] feat(ui): new TransitionHorizontal

Co-authored-by: Dustella <fdnoaivj@outlook.com>
---
 .../Animations/TransitionHorizontal.vue       | 36 +++++++++++++++++++
 .../ui/src/components/Animations/index.ts     |  1 +
 2 files changed, 37 insertions(+)
 create mode 100644 packages/ui/src/components/Animations/TransitionHorizontal.vue

diff --git a/packages/ui/src/components/Animations/TransitionHorizontal.vue b/packages/ui/src/components/Animations/TransitionHorizontal.vue
new file mode 100644
index 000000000..7412d9898
--- /dev/null
+++ b/packages/ui/src/components/Animations/TransitionHorizontal.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+function enter(el: any, done: any) {
+  el.style.transition = 'all 0.5s'
+  const width = el.scrollWidth
+  el.style.width = '0'
+  requestAnimationFrame(() => {
+    el.style.width = `${width}px`
+  })
+  el.addEventListener('transitionend', done)
+}
+
+function beforeLeave(el: any) {
+  el.style.transition = 'all 0.5s'
+  el.style.width = '0'
+  el.style.opacity = '0'
+}
+
+function leave(el: any, done: any) {
+  el.style.transition = 'all 0.5s'
+  el.style.width = '0'
+  el.style.opacity = '0'
+  el.addEventListener('transitionend', done)
+}
+</script>
+
+<template>
+  <Transition
+    name="slide-fade"
+    :css="false"
+    @enter="enter"
+    @leave="leave"
+    @before-leave="beforeLeave"
+  >
+    <slot />
+  </Transition>
+</template>
diff --git a/packages/ui/src/components/Animations/index.ts b/packages/ui/src/components/Animations/index.ts
index 7a34fb3b9..c6d5b45df 100644
--- a/packages/ui/src/components/Animations/index.ts
+++ b/packages/ui/src/components/Animations/index.ts
@@ -1 +1,2 @@
+export { default as TransitionHorizontal } from './TransitionHorizontal.vue'
 export { default as TransitionVertical } from './TransitionVertical.vue'