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