From e907a7737238494624c193ebc4f38a3822d59d01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Wed, 8 May 2024 01:54:08 +0200
Subject: [PATCH] feat(JTransition): add slide-y transition
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
---
 frontend/src/components/lib/JTransition.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/lib/JTransition.vue b/frontend/src/components/lib/JTransition.vue
index e511691cf28..47fd23d6f24 100644
--- a/frontend/src/components/lib/JTransition.vue
+++ b/frontend/src/components/lib/JTransition.vue
@@ -13,7 +13,7 @@ import { Transition, TransitionGroup, type TransitionProps, mergeProps } from 'v
 import { prefersNoMotion } from '@/store';
 
 export interface JTransitionProps extends BetterOmit<TransitionProps, 'name'> {
-  name?: 'fade' | 'rotated-zoom' | 'slide-y-reverse' | 'slide-x' | 'slide-x-reverse';
+  name?: 'fade' | 'rotated-zoom' | 'slide-y' | 'slide-y-reverse' | 'slide-x' | 'slide-x-reverse';
   /**
    * Transition group props
    */
@@ -68,10 +68,19 @@ const props = withDefaults(defineProps<JTransitionProps>(), { name: 'fade', grou
 .j-transition-slide-y-reverse-enter-active,
 .j-transition-slide-y-reverse-leave-active,
 .j-transition-slide-x-enter-active,
-.j-transition-slide-x-leave-active {
+.j-transition-slide-x-leave-active,
+.j-transition-slide-y-enter-from,
+.j-transition-slide-y-leave-to {
   transition-property: transform, opacity !important;
 }
 
+/** slide-y */
+.j-transition-slide-y-enter-from,
+.j-transition-slide-y-leave-to {
+  opacity: 0;
+  transform: translateY(-15px);
+}
+
 /** slide-y-reverse */
 .j-transition-slide-y-reverse-enter-from,
 .j-transition-slide-y-reverse-leave-to {