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'