Skip to content

为官网首页增加渐进增强动画与路由切换过渡 - #109

Draft
TechQuery with Copilot wants to merge 7 commits into
mainfrom
copilot/design-animate-idea2app-site
Draft

TechQuery with Copilot wants to merge 7 commits into
mainfrom
copilot/design-animate-idea2app-site

Conversation

Copilot AI commented Sep 21, 2026 •

Copy link
Copy Markdown
Contributor

PR-109 PR-109 PR-109 Powered by Pull Request Badge

本 PR 为 idea2app 官网补充了一组渐进增强的动画能力:首页区块动效、站内页面切换过渡,以及关键内部页面的预取/预渲染提示。实现重点放在现有 Next.js/Tailwind/Shadcn 结构内收口,避免引入额外动画框架或重构页面结构。

  • View Transition 路由过渡

    • 新增 TransitionLink,对站内字符串路由启用 document.startViewTransition()。
    • 保留无支持浏览器、外链、修饰键点击、以及 hash-only 导航的原有行为。
    • 应用到主导航、区块 CTA、成员卡片、项目入口等关键站内跳转路径。
  • 首页动效编排

    • 为 Hero、服务卡片、内容区块增加轻量入场动画。
    • 为服务卡片增加 hover 提升与阴影反馈。
    • 为合作伙伴区块实现连续滚动跑马灯,并支持 hover 暂停。
  • Speculation Rules 预加载

    • 在 pages/_document.tsx 注入 speculationrules。
    • 预渲染范围收敛到高价值公开页面,避免全站级激进预加载。
    • 预取覆盖首页常见公开导航目标页。
  • 实现约束

    • 以渐进增强为原则:不依赖新运行时库,不改变现有页面数据流。
    • 动画通过现有全局样式与局部类名接入,便于后续继续细化视觉表现。
export function TransitionLink({ href, ...props }: { href: string } & ComponentProps<typeof Link>) {
  const router = useRouter();

  const handleClickCapture = (event: MouseEvent<HTMLAnchorElement>) => {
    if (!document.startViewTransition || !href.startsWith('/')) return;

    const nextURL = new URL(href, location.href);
    const currentURL = new URL(router.asPath, location.href);

    if (
      (nextURL.pathname === currentURL.pathname &&
        nextURL.search === currentURL.search &&
        nextURL.hash !== currentURL.hash) ||
      nextURL.href === currentURL.href
    )
      return;

    event.preventDefault();

    document.startViewTransition(() => router.push(href));
  };

  return <Link href={href} onClickCapture={handleClickCapture} {...props} />;
}

Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>
Copilot AI and others added 2 commits September 21, 2026 18:31
Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>
Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>
Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>
Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>
Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>
Copilot AI changed the title [WIP] Add animations to idea2app website using Shadcn and ViewTransition 为官网首页增加渐进增强动画与路由切换过渡 Sep 21, 2026
Copilot AI requested a review from TechQuery September 21, 2026 18:36

This branch had an error being deployed

1 failed deployment
copilot/design-animate-idea2app-site - idea2app.github.io PR #109 — 8c8e031d Deployed Sep 21, 2026 by TechQuery
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

给 idea2app 官网设计并配置动画

2 participants