diff options
Diffstat (limited to 'src/components/ui/effects/Appear.tsx')
-rw-r--r-- | src/components/ui/effects/Appear.tsx | 27 |
1 files changed, 12 insertions, 15 deletions
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx index 06f63a029..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 { CSSTransition, TransitionGroup } 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; |
@@ -33,20 +33,17 @@ const Appear = ({ | |||
33 | } | 33 | } |
34 | 34 | ||
35 | return ( | 35 | return ( |
36 | <TransitionGroup component={null}> | 36 | <CSSTransitionGroup |
37 | <CSSTransition | 37 | transitionName={transitionName} |
38 | classNames={transitionName || className} | 38 | transitionAppear={transitionAppear} |
39 | appear={transitionAppear} | 39 | transitionLeave={transitionLeave} |
40 | exit={transitionLeave} | 40 | transitionAppearTimeout={transitionAppearTimeout} |
41 | timeout={{ | 41 | transitionEnterTimeout={transitionEnterTimeout} |
42 | enter: transitionEnterTimeout, | 42 | transitionLeaveTimeout={transitionLeaveTimeout} |
43 | appear: transitionAppearTimeout, | 43 | className={className} |
44 | exit: transitionLeaveTimeout, | 44 | > |
45 | }} | 45 | {children} |
46 | > | 46 | </CSSTransitionGroup> |
47 | {children} | ||
48 | </CSSTransition> | ||
49 | </TransitionGroup> | ||
50 | ); | 47 | ); |
51 | }; | 48 | }; |
52 | 49 | ||