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