React-transition-group has no effect running animations in Next.js 14.2.3 App Router

[youjia727]

'use client';

import { usePathname } from "next/navigation"; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import classNames from "classnames"; import './index.scss';

export default function Translation({ children }: { children: React.ReactNode }) {

const pathname = usePathname(); const router = useCustomRouter();

return ( <> <div style={{ height: pathname === '/login' ? 396 : 415 }} className="animation"> <TransitionGroup className={classNames('transition')}> <CSSTransition key={pathname} classNames="page-transition" timeout={400}> {children} // This is the route </CSSTransition> </TransitionGroup> </> ) }

index.scss

.animation { position: relative; overflow: hidden; transition: height 400ms ease; }

.transition>* { top: 0; left: 0; width: 100%; position: absolute; }

.page-transition-enter, .page-transition-appear { transform: translateX(100%); transition: none; }

.return .page-transition-enter, .return .page-transition-appear { transform: translateX(-100%); }

.page-transition-enter-active, .page-transition-appear-active { transform: translateX(0%) !important; transition: all 400ms cubic-bezier(0.25, 0, 0, 1); }

.page-transition-exit { transform: translateX(0); transition: none; }

.page-transition-exit-active { transform: translateX(-100%); transition: all 400ms cubic-bezier(0.25, 0, 0, 1); }

.return .page-transition-exit-active { transform: translateX(100%); transition: all 400ms cubic-bezier(0.25, 0, 0, 1); } }

Run the code above to see the results，Can you see if there's a configuration wrong？