Open mufeng889 opened 1 day ago
方法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;
}
您好 第一种方法我是不行的 我也是用 createBrowserRouter 数据路由器创建路由的 并在此之上 做了扩展 按理说 我没有做任何修改 应该也是可以的 但是不行 因此 我选择了第二种方法 反正 最终的效果是是实现动画 还有 相较于市面上的其他两个缓存插件 我更看好你这个 从源码上来看 你的更好 唯一差的可能就是发布的时间没有 其他的早 所以知名度没有那么高 加油!
我注意到你实际上是 通过AnimationWrapper的children渲染的 我也尝试把用了这个