37 lines
870 B
TypeScript
37 lines
870 B
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
||
|
|
import ShatterTransition from './ShatterTransition';
|
||
|
|
import { useState, useEffect } from 'react';
|
||
|
|
|
||
|
|
export default function TransitionWrapper({ children }: { children: React.ReactNode }) {
|
||
|
|
const { transitionKey } = useLanguage();
|
||
|
|
const [isActive, setIsActive] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
// transitionKey > 0 表示已经发生过语言切换
|
||
|
|
if (transitionKey > 0) {
|
||
|
|
setIsActive(true);
|
||
|
|
|
||
|
|
// 动画结束后重置状态
|
||
|
|
const timer = setTimeout(() => {
|
||
|
|
setIsActive(false);
|
||
|
|
}, 1500);
|
||
|
|
|
||
|
|
return () => clearTimeout(timer);
|
||
|
|
}
|
||
|
|
}, [transitionKey]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{children}
|
||
|
|
<ShatterTransition
|
||
|
|
isActive={isActive}
|
||
|
|
onComplete={() => {
|
||
|
|
// 动画完成后的回调
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|