How to use with <Outlet />

[KyleRicardo]

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]

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