asset-homepage/components/TransitionWrapper.tsx

'use client';

import { useLanguage } from '@/contexts/LanguageContext';
import ShatterTransition from './ShatterTransition';
import { useState, useEffect, useCallback } 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]);

  const handleComplete = useCallback(() => {
    // 动画完成后的回调
  }, []);

  return (
    <>
      {children}
      <ShatterTransition
        isActive={isActive}
        onComplete={handleComplete}
      />
    </>
  );
}