Skip to content

Commit

Permalink
feat(JTransition): add slide-y transition
Browse files Browse the repository at this point in the history
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
  • Loading branch information
ferferga committed May 8, 2024
1 parent 2ab5211 commit e907a77
Showing 1 changed file with 11 additions and 2 deletions.
13 changes: 11 additions & 2 deletions frontend/src/components/lib/JTransition.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit e907a77

Please sign in to comment.