@1papaya/gatsby-plugin-transition-link 中文文档教程

Question

Gatsby Plugin Transition Link

TransitionLink 提供了一个简单的 API，用于描述 Gatsbyjs 中页面之间的表现力转换。 页面链接用于确定应触发哪个转换，从而使页面转换灵活且易于使用。

TransitionLink 兼容声明式 React 动画库，例如 react-pose 和 反应弹簧。 它还与 gsap 和 anime.js 等命令式动画库兼容

Sites that use TransitionLink

• dsewell.com
• principlesofwealth.net
• incentro.com
• peintagone.be
• strandrover.com
• hiddenwork.ca
• mortgagesrm.co.uk
• bare.ca
• featurist.co.uk
• TransitionLink docs [source]
• Edit this file to add yours!
• christianibarguen.com
• gatsby-theme-byfolio

Features

• Per-Link transitions
• Fine control of page mounting and unmounting timing
• Function or state based transitions with <TransitionLink />
• Transition state and status with <TransitionState /> and in your page & template props
• Display animation content above your pages with <TransitionPortal />
• Use default transitions with <AniLink />

Usage

有关使用 TransitionLink 的信息，请参阅文档。 文档站点的源代码可在此处找到。

Contributing

0. Make sure you have yarn installed.
1. Create a new folder to be used as your yarn workspace. mkdir transitionlink-workspace
2. Inside your workspace folder, clone this repo.
3. cd into this repo and run yarn && yarn watch. Leave this terminal window open.
4. Beside this repo in your workspace folder, add a gatsby site that uses transition link for testing purposes (you can copy/paste the example site from this repo if needed).
5. In your workspace folder create a package.json and add the following:

{
    "private": true,
    "workspaces": [
        "example", <-- the name of your test site folder
        "gatsby-plugin-transition-link/lib"
    ]
}

6. In a new terminal window, cd to your workspace folder and run yarn && yarn workspace example run develop.

现在，当您对 TransitionLink src 文件夹进行更改时，它们将反映在您的项目中。

请为您的提交消息使用常规提交规范。

欢迎功能请求和 PR！ 如果您遇到问题，请留下问题，我会尽快帮助您。