From da610148e318c26c8d90a48a739b9d11eb810b23 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Thu, 6 Mar 2025 18:32:49 +0800
Subject: [PATCH] fix(ui-transitions): bad impl

Signed-off-by: Neko Ayaka <neko@ayaka.moe>
---
 .../playground/src/pages/transition-5.vue     |   1 +
 .../src/components/FantasyFallTransition.vue  | 192 +++++++++++++++---
 2 files changed, 164 insertions(+), 29 deletions(-)

diff --git a/packages/ui-transitions/playground/src/pages/transition-5.vue b/packages/ui-transitions/playground/src/pages/transition-5.vue
index fe4120534..7ba6e9ca1 100644
--- a/packages/ui-transitions/playground/src/pages/transition-5.vue
+++ b/packages/ui-transitions/playground/src/pages/transition-5.vue
@@ -7,6 +7,7 @@ definePage({
   meta: {
     stageTransition: {
       name: 'fantasy-fall',
+      direction: 'down',
     },
   },
 })
diff --git a/packages/ui-transitions/src/components/FantasyFallTransition.vue b/packages/ui-transitions/src/components/FantasyFallTransition.vue
index 4f3be17f3..e7f995ee7 100644
--- a/packages/ui-transitions/src/components/FantasyFallTransition.vue
+++ b/packages/ui-transitions/src/components/FantasyFallTransition.vue
@@ -1,18 +1,22 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 
 const props = defineProps <{
   stageTransition?: {
     primaryColor?: string
     duration?: number
     delay?: number
+    direction?: 'up' | 'down' | 'left' | 'right'
     borderRadius?: {
       sm?: string
       md?: string
       lg?: string
     }
   }
-}> ()
+}>()
+
+const direction = computed(() => props.stageTransition.direction || 'up')
+const directionClass = computed(() => `fantasy-fall-${direction.value}`)
 
 onMounted(() => {
   document.documentElement.style.setProperty('--fantasy-fall-color', props.stageTransition.primaryColor || '#eee')
@@ -25,7 +29,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="fantasy-fall-transition" />
+  <div class="fantasy-fall-transition" :class="directionClass" />
 </template>
 
 <style scoped>
@@ -33,24 +37,121 @@ onMounted(() => {
   position: absolute;
   inset: 0;
   overflow: hidden;
+}
 
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--fantasy-fall-color);
-    transform: translateY(-100%);
-    border-bottom-left-radius: var(--fantasy-fall-radius-sm);
-    border-bottom-right-radius: var(--fantasy-fall-radius-sm);
-    animation: fantasy-fall var(--fantasy-fall-duration) ease-out var(--fantasy-fall-delay) forwards;
+/* Top direction (default) */
+.fantasy-fall-up::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--fantasy-fall-color);
+  transform: translateY(-100%);
+  border-bottom-left-radius: var(--fantasy-fall-radius-sm);
+  border-bottom-right-radius: var(--fantasy-fall-radius-sm);
+  animation: fantasy-fall-up var(--fantasy-fall-duration) ease-out var(--fantasy-fall-delay) forwards;
+}
+
+/* Bottom direction */
+.fantasy-fall-down::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--fantasy-fall-color);
+  transform: translateY(100%);
+  border-top-left-radius: var(--fantasy-fall-radius-sm);
+  border-top-right-radius: var(--fantasy-fall-radius-sm);
+  animation: fantasy-fall-down var(--fantasy-fall-duration) ease-out var(--fantasy-fall-delay) forwards;
+}
+
+/* Left direction */
+.fantasy-fall-left::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--fantasy-fall-color);
+  transform: translateX(-100%);
+  border-top-right-radius: var(--fantasy-fall-radius-sm);
+  border-bottom-right-radius: var(--fantasy-fall-radius-sm);
+  animation: fantasy-fall-left var(--fantasy-fall-duration) ease-out var(--fantasy-fall-delay) forwards;
+}
+
+/* Right direction */
+.fantasy-fall-right::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--fantasy-fall-color);
+  transform: translateX(100%);
+  border-top-left-radius: var(--fantasy-fall-radius-sm);
+  border-bottom-left-radius: var(--fantasy-fall-radius-sm);
+  animation: fantasy-fall-right var(--fantasy-fall-duration) ease-out var(--fantasy-fall-delay) forwards;
+}
+
+/* Responsive border radius adjustments */
+@media (min-width: 768px) {
+  .fantasy-fall-up::before {
+    border-bottom-left-radius: var(--fantasy-fall-radius-md);
+    border-bottom-right-radius: var(--fantasy-fall-radius-md);
+  }
+
+  .fantasy-fall-down::before {
+    border-top-left-radius: var(--fantasy-fall-radius-md);
+    border-top-right-radius: var(--fantasy-fall-radius-md);
+  }
+
+  .fantasy-fall-left::before {
+    border-top-right-radius: var(--fantasy-fall-radius-md);
+    border-bottom-right-radius: var(--fantasy-fall-radius-md);
+  }
+
+  .fantasy-fall-right::before {
+    border-top-left-radius: var(--fantasy-fall-radius-md);
+    border-bottom-left-radius: var(--fantasy-fall-radius-md);
   }
 }
 
-@keyframes fantasy-fall {
+@media (min-width: 1024px) {
+  .fantasy-fall-up::before {
+    border-bottom-left-radius: var(--fantasy-fall-radius-lg);
+    border-bottom-right-radius: var(--fantasy-fall-radius-lg);
+  }
+
+  .fantasy-fall-down::before {
+    border-top-left-radius: var(--fantasy-fall-radius-lg);
+    border-top-right-radius: var(--fantasy-fall-radius-lg);
+  }
+
+  .fantasy-fall-left::before {
+    border-top-right-radius: var(--fantasy-fall-radius-lg);
+    border-bottom-right-radius: var(--fantasy-fall-radius-lg);
+  }
+
+  .fantasy-fall-right::before {
+    border-top-left-radius: var(--fantasy-fall-radius-lg);
+    border-bottom-left-radius: var(--fantasy-fall-radius-lg);
+  }
+}
+</style>
+
+<style>
+/* Top direction animation */
+@keyframes fantasy-fall-up {
   0% {
     transform: translateY(-100%);
   }
@@ -66,21 +167,54 @@ onMounted(() => {
   }
 }
 
-@media (min-width: 768px) {
-  .fantasy-fall-transition {
-    &::before {
-      border-bottom-left-radius: var(--fantasy-fall-radius-md);
-      border-bottom-right-radius: var(--fantasy-fall-radius-md);
-    }
+/* Bottom direction animation */
+@keyframes fantasy-fall-down {
+  0% {
+    transform: translateY(100%);
+  }
+
+  50% {
+    transform: translateY(0%);
+  }
+
+  100% {
+    transform: translateY(0%);
+    border-top-right-radius: 0%;
+    border-top-left-radius: 0%;
   }
 }
 
-@media (min-width: 1024px) {
-  .fantasy-fall-transition {
-    &::before {
-      border-bottom-left-radius: var(--fantasy-fall-radius-lg);
-      border-bottom-right-radius: var(--fantasy-fall-radius-lg);
-    }
+/* Left direction animation */
+@keyframes fantasy-fall-left {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  50% {
+    transform: translateX(0%);
+  }
+
+  100% {
+    transform: translateX(0%);
+    border-top-right-radius: 0%;
+    border-bottom-right-radius: 0%;
+  }
+}
+
+/* Right direction animation */
+@keyframes fantasy-fall-right {
+  0% {
+    transform: translateX(100%);
+  }
+
+  50% {
+    transform: translateX(0%);
+  }
+
+  100% {
+    transform: translateX(0%);
+    border-top-left-radius: 0%;
+    border-bottom-left-radius: 0%;
   }
 }
 </style>