react-transition-group
react-transition-group copied to clipboard
the effect is not as expected.
---first---
<TransitionGroup style={{ height: '100%' }}>
<CSSTransition
key={location.key}
classNames="fade"
timeout={500}
style={{ height: '100%' }}
unmountOnExit
>
<Routes>
<Route path="/new-chat" element={
AINewChat()
} />
<Route path="/chat" element={
<div>默认的聊天页面</div>
} />
<Route path="/" element={
<div>默认的聊天页面</div>
} />
</Routes>
</CSSTransition>
</TransitionGroup>
---second---
<TransitionGroup style={{ height: '100%' }}>
<CSSTransition
key={location.key}
classNames="fade"
timeout={500}
style={{ height: '100%' }}
nodeRef={nodeRef}
unmountOnExit
>
<div ref={nodeRef}>
<Routes>
<Route path="/new-chat" element={

AINewChat()
} />
<Route path="/chat" element={
<div>默认的聊天页面</div>
} />
<Route path="/" element={
<div>默认的聊天页面</div>
} />
</Routes>
</div>
</CSSTransition>
</TransitionGroup>
.fade-enter {
opacity: 0;
transform: scale(0.9);
}
.fade-enter-active {
opacity: 1;
transform: scale(1);
transition: opacity 500ms, transform 500ms;
}
.fade-exit {
opacity: 1;
transform: scale(1);
}
.fade-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 500ms, transform 500ms;
}
excessive effect is inconsistent,
'first' although there is a 'findDOMNode is deprecated and will be removed in the next major release. Instead' warning, the effect is as expected.
'second' the effect of displaying the page twice