feat: 优化官网动画效果 (#12432)

优化友链列表出现消失动画
为底部许可证文本添加动画
修复点击查看全部后按钮乱跳
整理注释

website/apps/web/src/components/home/HomeActions/HomeActions.tsx

@@ -95,10 +95,33 @@ export const HomeActions: FC<HomeActionsProps> = ({ toggleLinks, showLinks }) =>
           </div>
         </GlowButton>
       </div>
-
       <div className="mt-6 text-xs leading-5 text-center md:mt-8 dark:text-white/70 text-black/70 transition-colors duration-300">
-        <span style={{ display: 'inline-block' }}>MAA 以 AGPL-3.0 协议开源；</span>
-        <span style={{ display: 'inline-block' }}>使用即表示您同意并知悉「用户协议」的相关内容。</span>
+        <motion.span
+          className="whitespace-nowrap"
+          initial={{ opacity: 0, x: -10, }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.5, ease: 'easeOut', delay: 1.3 }}
+          style={{ display: 'inline-block' }}
+        >
+          MAA 以 AGPL-3.0 协议开源
+        </motion.span>
+        <motion.span
+          initial={{ opacity: 0, x: -10 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.3, ease: 'easeOut', delay: 1.4 }}
+          style={{ display: 'inline-block' }}
+        >
+          ；
+        </motion.span>
+        <motion.span
+          className="whitespace-nowrap"
+          initial={{ opacity: 0, x: -10 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.4, ease: 'easeOut', delay: 1.4 }}
+          style={{ display: 'inline-block' }}
+        >
+          使用即表示您同意并知悉「用户协议」的相关内容。
+        </motion.span>
       </div>
     </div>
   )

website/apps/web/src/components/home/HomeActionsRelease/HomeActionsRelease.tsx

@@ -469,11 +469,12 @@ export const DownloadButtons: FC<{ release: Release }> = ({ release }) => {
   const allPlatformDownloadBtns = useMemo(
     () =>
       validPlatforms.map((platform) => (
-        <DownloadButton
-          platform={platform}
-          releaseName={release.name}
-          key={platform.platform.id}
-        />
+        <motion.div layout key={platform.platform.id}>
+          <DownloadButton
+            platform={platform}
+            releaseName={release.name}
+          />
+        </motion.div>
       )),
     [validPlatforms],
   )
@@ -488,11 +489,12 @@ export const DownloadButtons: FC<{ release: Release }> = ({ release }) => {
       if (!platform) return allPlatformDownloadBtns
 
       return [
-        <DownloadButton
-          platform={platform}
-          releaseName={release.name}
-          key={platform.platform.id}
-        />,
+        <motion.div layout key={platform.platform.id}>
+          <DownloadButton
+            platform={platform}
+            releaseName={release.name}
+          />
+        </motion.div>,
       ]
     }
   }, [validPlatforms, viewAll, envPlatformId])
@@ -530,9 +532,15 @@ export const DownloadButtons: FC<{ release: Release }> = ({ release }) => {
         />
       )}
       {!viewAll && (
-        <div className="gap-4 items-center flex flex-col md:flex-row">
+        <motion.div
+          layout
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: 'auto' }}
+          exit={{ opacity: 0, height: 0 }}
+          key="view-all-switch"
+          className="gap-4 items-center flex flex-col md:flex-row"
+        >
           <GlowButton
-            key="view-all-switch"
             bordered
             onClick={() => setViewAll(true)}
           >
@@ -540,19 +548,26 @@ export const DownloadButtons: FC<{ release: Release }> = ({ release }) => {
                 查看全部
             </div>
           </GlowButton>
-        </div>
+        </motion.div>
       )}
       {!viewAll && mirrorchyanAvailable && (
-        <GlowButton
+        <motion.div
+          layout
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: 'auto' }}
+          exit={{ opacity: 0, height: 0 }}
           key="mirrorchyan"
-          bordered
-          href={`https://mirrorchyan.com/zh/projects?rid=MAA&os=${os}&arch=${arch}&channel=stable`}
         >
-          <div className="text-sm">
-            <p><i>已有 Mirror酱 CDK？</i></p>
-            <p><i>前往 Mirror酱 高速下载</i></p>
-          </div>
-        </GlowButton>
+          <GlowButton
+            bordered
+            href={`https://mirrorchyan.com/zh/projects?rid=MAA&os=${os}&arch=${arch}&channel=stable`}
+          >
+            <div className="text-sm">
+              <p><i>已有 Mirror酱 CDK？</i></p>
+              <p><i>前往 Mirror酱 高速下载</i></p>
+            </div>
+          </GlowButton>
+        </motion.div>
       )}
     </AnimatePresence>
   )

website/apps/web/src/components/home/HomeHero.tsx

@@ -17,7 +17,6 @@ export const HomeHero: FC = () => {
   const indicatorRef = useRef<HTMLDivElement | null>(null)
   const windowDimensions = useWindowSize()
   const { theme } = useTheme()
-  // 添加控制友情链接显示的状态
   const [showLinks, setShowLinks] = useState(false)
 
   return (
@@ -63,7 +62,6 @@ export const HomeHero: FC = () => {
         showLinks={showLinks} 
         onClose={() => setShowLinks(false)} 
       />
-      {/* 移除指示器组件，不再需要通过鼠标触发友情链接 */}
     </div>
   )
 }

website/apps/web/src/components/home/HomeLinks/HomeLinks.tsx

@@ -279,9 +279,11 @@ export const HomeLinks = forwardRef<HTMLDivElement, HomeLinksProps>(({ showLinks
         
         // 根据面板位置应用不同的隐藏动画
         if (isPanelCenteredRef.current) {
-          panel.current.style.transform = 'translate(-50%, -60%)'; // 居中时向上移动一点，纵向淡出
+          // 居中时向下纵向淡出
+          panel.current.style.transform = 'translate(-50%, -50%) translateY(10px) rotateX(5deg)'; // 有点屎的实现，但能用
         } else {
-          panel.current.style.transform = 'translateX(-10px) rotateY(10deg)'; // 在右侧时向左移动，横向淡出
+          // 在右侧时向左横向淡出
+          panel.current.style.transform = 'translateX(-10px) rotateY(10deg)';
         }
       }
     };