diff options
Diffstat (limited to 'src/components/ui/effects/Appear.tsx')
-rw-r--r-- | src/components/ui/effects/Appear.tsx | 21 |
1 files changed, 16 insertions, 5 deletions
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx index bf097b6a6..2076f6ba6 100644 --- a/src/components/ui/effects/Appear.tsx +++ b/src/components/ui/effects/Appear.tsx | |||
@@ -5,11 +5,22 @@ interface IProps { | |||
5 | children: ReactNode; | 5 | children: ReactNode; |
6 | transitionName?: string; | 6 | transitionName?: string; |
7 | className?: string; | 7 | className?: string; |
8 | transitionAppear?: boolean; | ||
9 | transitionLeave?: boolean; | ||
10 | transitionAppearTimeout?: number; | ||
11 | transitionEnterTimeout?: number; | ||
12 | transitionLeaveTimeout?: number; | ||
8 | } | 13 | } |
14 | |||
9 | const Appear = ({ | 15 | const Appear = ({ |
10 | children, | 16 | children, |
11 | transitionName = 'fadeIn', | 17 | transitionName = 'fadeIn', |
12 | className = '', | 18 | className = '', |
19 | transitionAppear = true, | ||
20 | transitionLeave = true, | ||
21 | transitionAppearTimeout = 1500, | ||
22 | transitionEnterTimeout = 1500, | ||
23 | transitionLeaveTimeout = 1500, | ||
13 | }: IProps): ReactElement | null => { | 24 | }: IProps): ReactElement | null => { |
14 | const [mounted, setMounted] = useState(false); | 25 | const [mounted, setMounted] = useState(false); |
15 | 26 | ||
@@ -24,11 +35,11 @@ const Appear = ({ | |||
24 | return ( | 35 | return ( |
25 | <CSSTransitionGroup | 36 | <CSSTransitionGroup |
26 | transitionName={transitionName} | 37 | transitionName={transitionName} |
27 | transitionAppear | 38 | transitionAppear={transitionAppear} |
28 | transitionLeave | 39 | transitionLeave={transitionLeave} |
29 | transitionAppearTimeout={1500} | 40 | transitionAppearTimeout={transitionAppearTimeout} |
30 | transitionEnterTimeout={1500} | 41 | transitionEnterTimeout={transitionEnterTimeout} |
31 | transitionLeaveTimeout={1500} | 42 | transitionLeaveTimeout={transitionLeaveTimeout} |
32 | className={className} | 43 | className={className} |
33 | > | 44 | > |
34 | {children} | 45 | {children} |