How should this keepalive component be integrated with react-transition-group?

[mufeng889]

<SwitchTransition mode="out-in">
  <CSSTransition
    key={reloadFlag ? location.key : 'reload-page'}
    nodeRef={nodeRef}
    timeout={300}
    onExit={() => dispatch(setContentXScrollable(true))}
    onExited={resetScroll}
    onEntered={() => dispatch(setContentXScrollable(false))}
    classNames="page"
    unmountOnExit
  >
    <div
      className={ClassNames('h-full flex-grow bg-layout ', { 'p-16px': !closePadding })}
      ref={nodeRef}
    >
      {reloadFlag && currentOutlet}
    </div>
  </CSSTransition>
</SwitchTransition>

我注意到你实际上是 通过AnimationWrapper的children渲染的 我也尝试把用了这个

dispatch(setContentXScrollable(true))} onExited={resetScroll} onEntered={() => dispatch(setContentXScrollable(false))} classNames="page" unmountOnExit > 把这两个传进去 但是都没有 得到预想的效果 保持动画和keppalive

[irychen]

方法1

  <TransitionGroup>
      <CSSTransition key={location.key} timeout={300} classNames="fade">
          <KeepAlive
              activeName={cacheKey}
              exclude={[/\/exclude-counter/]}
              max={10}
              strategy={'LRU'}
          >
              {outlet}
          </KeepAlive>
      </CSSTransition>
  </TransitionGroup>

方法2

.keep-alive-render {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cache-component {
    width: 100%;
    height: 100%;
    overflow: auto;
}

@keyframes slide-in {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.cache-component {
    animation:
        fade-in 0.3s ease-in-out,
        slide-in 0.3s ease-in-out;
}

[mufeng889]

您好 第一种方法我是不行的 我也是用 createBrowserRouter 数据路由器创建路由的 并在此之上 做了扩展 按理说 我没有做任何修改 应该也是可以的 但是不行 因此 我选择了第二种方法 反正 最终的效果是是实现动画 还有 相较于市面上的其他两个缓存插件 我更看好你这个 从源码上来看 你的更好 唯一差的可能就是发布的时间没有 其他的早 所以知名度没有那么高 加油!

[irychen]

方法一 outlet.tsx

  <TransitionGroup style={{
      height: '100%',
      overflow: 'hidden',
  }}>
      <CSSTransition key={location.key} timeout={300} classNames="fade" >
          <KeepAlive activeName={cacheKey} max={10} strategy={'LRU'}>
              {outlet}
          </KeepAlive>
      </CSSTransition>
  </TransitionGroup>

.fade-enter {
    opacity: 0;
  }
  .fade-enter-active {
    opacity: 1;
    transition: opacity 300ms;
  }
  .fade-exit {
    opacity: 1;
  }
  .fade-exit-active {
    opacity: 0;
    transition: opacity 300ms;
  }

router.tsx

  <HashRouter basename="/app">
    <Routes>
      <Route path="/" /> {/* 👈 Renders at /#/app/ */}
       ...
    </Routes>
  </HashRouter>

[mufeng889]

谢谢 作者大大大晚上还回复 我已经决定用第二种方式了 最终的目的是实现动画效果而已 我必须得用 createBrowserRouter或者createHashRouter 然后通过routerProvider 渲染出来 我现在扩展的路由api 像vue-router那样 全部是建立在这之上的 不可能 换别的写法 在路由上

[irychen]

好滴