/
transitions.ts
72 lines (66 loc) · 2.98 KB
/
transitions.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { useMemo } from 'react';
import type { TransitionStatus } from 'react-transition-group';
import clsx from 'clsx';
export function transition(status: TransitionStatus, transition: Transition, index = 0) {
return clsx(transitions[transition](index)[status], 'duration-250');
}
type Transition = 'slideDown' | 'slideUp' | 'slideLeft' | 'slideRight' | 'fade' | 'zoom' | 'zoomRotate';
export const transitions: Record<Transition, (index: number) => Record<TransitionStatus, string>> = {
slideDown: () => ({
entering: 'opacity-0 -translate-y-24',
entered: 'transition-[transform,opacity] ease-out opacity-1 translate-y-0',
exiting: 'transition-[transform,opacity] ease-in opacity-0 -translate-y-24',
exited: 'opacity-0 -translate-y-24',
unmounted: 'opacity-0 -translate-y-24',
}),
slideUp: () => ({
entering: 'opacity-0 translate-y-24',
entered: 'transition-[transform,opacity] ease-out opacity-1 translate-y-0',
exiting: 'transition-[transform,opacity] ease-in opacity-0 translate-y-24',
exited: 'opacity-0 translate-y-24',
unmounted: 'opacity-0 translate-y-24',
}),
slideLeft: () => ({
entering: 'opacity-0 translate-x-24',
entered: 'transition-[transform,opacity] ease-out opacity-1 translate-y-0',
exiting: 'transition-[transform,opacity] ease-in opacity-0 translate-x-24',
exited: 'opacity-0 translate-x-24',
unmounted: 'opacity-0 translate-x-24',
}),
slideRight: () => ({
entering: 'opacity-0 -translate-x-24',
entered: 'transition-[transform,opacity] ease-out opacity-1 translate-x-0',
exiting: 'transition-[transform,opacity] ease-in opacity-0 -translate-x-24',
exited: 'opacity-0 -translate-x-24',
unmounted: 'opacity-0 -translate-x-24',
}),
fade: () => ({
entering: 'opacity-0',
entered: 'transition-all ease-out opacity-1',
exiting: 'transition-all ease-in opacity-0',
exited: 'opacity-0',
unmounted: 'opacity-0',
}),
zoom: () => ({
entering: 'opacity-0 scale-50',
entered: 'transition-[transform,opacity] ease-out opacity-1 scale-100',
exiting: 'transition-[transform,opacity] ease-in opacity-0 scale-50',
exited: 'opacity-0 scale-50',
unmounted: 'opacity-0 scale-50',
}),
zoomRotate: (index: number) => {
const idx = index % rotations.length;
return {
entering: clsx('opacity-0 scale-50', startRotations[idx]),
entered: clsx('transition-[transform,opacity] ease-out opacity-1 scale-100', rotations[idx]),
exiting: clsx('transition-[transform,opacity] ease-in opacity-0 scale-50', rotations[idx]),
exited: clsx('opacity-0 scale-50', startRotations[idx]),
unmounted: clsx('opacity-0 scale-50', startRotations[idx]),
};
},
};
const startRotations = ['rotate-12', '-rotate-12', 'rotate-12', '-rotate-12', 'rotate-12', '-rotate-12'];
const rotations = ['-rotate-6', 'rotate-6', '-rotate-3', 'rotate-3', 'rotate-2', '-rotate-2'];
export function useTransitionIndex() {
return useMemo(() => Math.floor(Math.random() * rotations.length), []);
}