gatsby_如何为Gatsby.js中的页面过渡设置动画-CSDN博客

gatsby

by Dimitri Ivashchuk

由Dimitri Ivashchuk

如何为Gatsby.js中的页面过渡设置动画 (How to animate page transitions in Gatsby.js)

I’m totally enjoying Gatsby for various reasons, and in this post I want to share how easy it is to add customized page transitions to your website to make it more lively and smooth.

由于种种原因，我完全喜欢Gatsby，在这篇文章中，我想分享将自定义页面过渡添加到您的网站以使其更加生动 流畅的过程是多么容易。

We will be using Gatsby default starter to make this example as isolated as possible, but you can be sure that it will also work for more complex starters and projects created by you from scratch.

我们将使用Gatsby默认启动程序使该示例尽可能孤立，但是您可以确保它也适用于从头开始创建的更复杂的启动程序和项目。

As a teaser, we will build something similar to what you see when you follow links on this site. ?

作为预告片，我们将构建与您访问此站点上的链接时所看到的类似的东西。？

入门吗？ (Getting started ?️)

If you are new to Gatsby and want to follow along with this tutorial, be sure to install Gatsby’s command line interface (Gatsby CLI) so you can quickly bootstrap new projects in the future.

如果您是Gatsby的新手，并且想按照本教程进行操作，请确保安装Gatsby的命令行界面( Gatsby CLI )，以便将来可以快速引导新项目。

npm install --global gatsby-cli

Navigate to your project folder and create a new Gatsby project inside of it by running the following command in the terminal:

导航到您的项目文件夹，并在终端中运行以下命令，在其中创建一个新的Gatsby项目：

gatsby new .

It will create a project with the simplest possible setup and it should look like this: (it may vary due to further iterations on starter’s design)

它将使用最简单的设置创建一个项目，并且看起来应该像这样：(由于入门者设计的进一步迭代，它可能会有所不同)

安装必要的依赖项⚙️ (Installing necessary dependencies ⚙️)

First of all we need to install react-transition-group which is responsible for watching out for elements entering and leaving the DOM and applying animations to them.

首先，我们需要安装react-transition-group ，负责监视元素进入和离开DOM并向其应用动画。

npm install react-transition-group

We will also install gatsby-plugin-layout that, in our case, provides the location property required for transitions to work and injects our layout to every page.

我们还将安装gatsby-plugin-layout ，在我们的示例中，它提供过渡工作所需的location属性，并将布局注入每个页面。

npm install gatsby-plugin-layout

To make the plugin work as expected, we need to move our layout component into the layouts folder at the root of our project and rename it to index.js. Let's also add transition.js to our components folder where we will supply all the transition logic. For now leave it empty as we have a little more to configure.

为了使插件按预期工作，我们需要将布局组件移至项目根目录下的layouts文件夹中，并将其重命名为index.js 。我们还要将transition.js添加到我们的components文件夹中，在其中我们将提供所有转换逻辑。现在暂时将其保留为空，因为我们还有更多需要配置。

The last step is adding our gatsby-plugin-layout to our gatsby-config.js file that is located in the root of our project

最后一步是将我们的gatsby-plugin-layout到位于项目根目录的gatsby-config.js文件中

过渡成分？ (Transition component ?)

This holds the full logic for transition that will be applied when a user decides to follow a link to another page on our site.

这保留了转换的完整逻辑，当用户决定跟随指向我们网站上另一页面的链接时，将应用转换的完整逻辑。

Inside transition.js add the following code which I will explain in the comments:

在transition.js添加以下代码，我将在注释中进行解释：

Now we can import the Transition component into the Layout component and wrap the children which represent our pages inside of it.

现在，我们可以将Transition组件导入到Layout组件中，并将代表我们页面的子组件包装在其中。

At this point you may experience a bug when some of your page elements are rendered twice. To solve that, just go trough the files in the pages folder and make sure that they don't import the <Layout> component and use it in the return statement.

此时，当某些页面元素呈现两次时，您可能会遇到错误。要解决此问题，只需<Layo pages文件夹中的文件，并确保它们不导入<Layo ut>组件并在return语句中使用它。

Now that everything is working as expected and you are enjoying your newly added page transitions, you may notice a slight jerky bug that appears when your page is being scrolled down and animation starts. Note that it happens when there is more content on the page and you can scroll.

现在一切都按预期工作，并且您正在享受新添加的页面过渡，当页面向下滚动并开始动画播放时，您可能会注意到一个轻微的错误。请注意，当页面上有更多内容并且您可以滚动时，就会发生这种情况。

We can easily fix this with the help of including the below code in our gatsby-browser.js which you can find in the root of our project. What we do here is actually setting a time out for animation and waiting for it to be executed until the page scrolls to the top.

我们可以通过在我们的项目根目录中找到的gatsby-browser.js中包含以下代码来轻松解决此问题。实际上，我们在这里设置动画的超时时间，并等待动画执行直到页面滚动到顶部。

On your website it should look like this

在您的网站上，它应该看起来像这样

I hope you’ve enjoyed this small post and will use your new knowledge whenever you need it. Here you can find a link to GitHub repo with the working code for this tutorial. Subscribe to me on twitter not to miss a next post about Gatsby.js and fun things you can do with it!

希望您喜欢这个小职位，并在需要时使用新知识。在这里，您可以找到带有本教程工作代码的GitHub存储库链接。在Twitter上订阅我，不要错过有关Gatsby.js的下一篇文章，以及您可以使用它做的有趣的事情！

Originally published at https://divdev.io which btw uses the animation technique we have learned in this post!

最初发布在 https://divdev.io上，它使用了我们在本文中中学到的动画技术！