reactjs - 在 ReactJS 中是否可以使用 HeadlessUI 在通过 Route 加载的组件之间进行转换？如果有怎么办？

Question

如果可能的话，我希望在这里能得到一些帮助。我正在用 React 开发一个项目，并使用 TailwindCSS 和 HeadlessUI 进行转换。是否可以在路由中使用 HeadlessUI 转换？使用路由加载下一个组件时，我无法让组件过渡出去。我基本上有一个页面从右侧出现并填满屏幕。然后，当单击按钮时，页面应该从左侧消失，并且下一页应该同时从右侧加载，下一页与前一页略有重叠，因为它们都在转换。我可以使用状态更改等很容易地做到这一点，但是当涉及到将组件包装在带有路径的路径中时，我终生无法解决这个难题。进入过渡有效，但离开过渡将不起作用并且组件消失。大概组件在离开过渡开始播放之前被卸载。那么如何防止组件在离开过渡结束后才被卸载呢？

             <Route path="/Subtest1">
                    <Transition
                        appear={true}
                        show={true}
                        enter="transform duration-500"
                        enterFrom={"translate-x-full"}
                        enterTo="translate-x-0"
                        leave="transform duration-500"
                        leaveFrom="translate-x-0"
                        leaveTo={"filter brightness-50 -translate-x-1/2"}
                        as="div"
                        className={"absolute z-20 top-0 left-0 right-0 w-full h-full flex items-center justify-center"}
                    >


                        <Subtest1 />
                        
                    </Transition>

                </Route>
                <Route path="/Subtest2">
                    <Transition
                        appear={true}
                        show={true}
                        enter="transform duration-500"
                        enterFrom={"translate-x-full"}
                        enterTo="translate-x-0"
                        leave="transform duration-500"
                        leaveFrom="translate-x-0"
                        leaveTo={"filter brightness-50 -translate-x-1/2"}
                        as="div"
                        className={"absolute z-20 top-0 left-0 right-0 w-full h-full flex items-center justify-center"}
                    >
                        <Subtest2 />
                    </Transition>
                    </Route>

我非常感谢您对此提供的任何帮助，因为尝试解决这些转换是非常漫长的一周。真的可以做到吗？

提前致谢。

标签： reactjsroutestailwind-cssheadless