react-transition-group icon indicating copy to clipboard operation
react-transition-group copied to clipboard

the effect is not as expected.

Open liuhongjian0316 opened this issue 8 months ago • 0 comments

---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 bug2 bug

liuhongjian0316 avatar Jun 13 '24 04:06 liuhongjian0316