diff options
Diffstat (limited to 'src/components/ui/effects')
-rw-r--r-- | src/components/ui/effects/Appear.tsx | 26 |
1 files changed, 12 insertions, 14 deletions
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx index 0868271f3..2076f6ba6 100644 --- a/src/components/ui/effects/Appear.tsx +++ b/src/components/ui/effects/Appear.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | import { ReactElement, ReactNode, useEffect, useState } from 'react'; | 1 | import { ReactElement, ReactNode, useEffect, useState } from 'react'; |
2 | import { TransitionGroup, CSSTransition } from 'react-transition-group'; | 2 | import { CSSTransitionGroup } from 'react-transition-group'; |
3 | 3 | ||
4 | interface IProps { | 4 | interface IProps { |
5 | children: ReactNode; | 5 | children: ReactNode; |
@@ -7,6 +7,7 @@ interface IProps { | |||
7 | className?: string; | 7 | className?: string; |
8 | transitionAppear?: boolean; | 8 | transitionAppear?: boolean; |
9 | transitionLeave?: boolean; | 9 | transitionLeave?: boolean; |
10 | transitionAppearTimeout?: number; | ||
10 | transitionEnterTimeout?: number; | 11 | transitionEnterTimeout?: number; |
11 | transitionLeaveTimeout?: number; | 12 | transitionLeaveTimeout?: number; |
12 | } | 13 | } |
@@ -17,6 +18,7 @@ const Appear = ({ | |||
17 | className = '', | 18 | className = '', |
18 | transitionAppear = true, | 19 | transitionAppear = true, |
19 | transitionLeave = true, | 20 | transitionLeave = true, |
21 | transitionAppearTimeout = 1500, | ||
20 | transitionEnterTimeout = 1500, | 22 | transitionEnterTimeout = 1500, |
21 | transitionLeaveTimeout = 1500, | 23 | transitionLeaveTimeout = 1500, |
22 | }: IProps): ReactElement | null => { | 24 | }: IProps): ReactElement | null => { |
@@ -31,21 +33,17 @@ const Appear = ({ | |||
31 | } | 33 | } |
32 | 34 | ||
33 | return ( | 35 | return ( |
34 | <TransitionGroup | 36 | <CSSTransitionGroup |
35 | appear={transitionAppear} | 37 | transitionName={transitionName} |
36 | exit={transitionLeave} | 38 | transitionAppear={transitionAppear} |
39 | transitionLeave={transitionLeave} | ||
40 | transitionAppearTimeout={transitionAppearTimeout} | ||
41 | transitionEnterTimeout={transitionEnterTimeout} | ||
42 | transitionLeaveTimeout={transitionLeaveTimeout} | ||
37 | className={className} | 43 | className={className} |
38 | > | 44 | > |
39 | <CSSTransition | 45 | {children} |
40 | classNames={transitionName} | 46 | </CSSTransitionGroup> |
41 | timeout={{ | ||
42 | enter: transitionEnterTimeout, | ||
43 | exit: transitionLeaveTimeout, | ||
44 | }} | ||
45 | > | ||
46 | {children} | ||
47 | </CSSTransition> | ||
48 | </TransitionGroup> | ||
49 | ); | 47 | ); |
50 | }; | 48 | }; |
51 | 49 | ||