Open liuhongjian0316 opened 5 months ago
---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={ ![bug](https://github.com/reactjs/react-transition-group/assets/45460278/0e90d3b0-021f-4c5c-97b5-309c2bee2d55) 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
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