jellyfin/jellyfin-vue
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-vue.git synced 2026-09-03 05:10:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(JTransition): add slide-y transition

Browse Source 
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
This commit is contained in:
Fernando Fernández
2024-05-08 03:05:53 +02:00
parent 717af1817a
commit 231ddd83e2
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/lib/JTransition.vue
+11 -2
View File
@@ -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 {