How to use with <Outlet />
KyleRicardo opened this issue · 1 comments
KyleRicardo commented
Hi, I have a common layout and subrouters show in <Outlet />
. It worked fine, but I wanted to add some slide animation when I route between pages. So I surround it with <Transition>
, it became broken. I didn't find any animation effects. Besides, if I click the go back button on Chrome, both routers' content showed at the same time.
jsx:
<Transition name="slide" appear={true}>
<Outlet />
</Transition>
css:
.slide-leave-active,
.slide-enter-active {
transition: all 1s ease;
}
.slide-enter-from {
transform: translateX(100%);
}
.slide-leave-to {
transform: translateX(-100%);
}
Sorry to ask this dumb question. But can you show me a simple example about this?
thetarnav commented
Hey, could you check if you are still having the same issue after on a new version? (0.1.0)
Here is a demo of using transition with router outlet: https://stackblitz.com/edit/solid-transition-group-outin-router-outlet