jellyfin/jellyfin-vue
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-vue.git synced 2024-12-02 19:16:40 +00:00
Code Issues Actions 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 01:54:08 +02:00
parent 717af1817a
commit 231ddd83e2
No known key found for this signature in database
GPG Key ID: 82FD36644F1F4D3B
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/lib/JTransition.vue
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 {