1

我需要创建多语言网站，并且需要使用成帧器动作来使用动画和页面转换。

我使用了最流行的 gatsby 插件来实现多语言功能gatsby-plugin-intl。为了实现页面转换，我使用了本文中提到的方法。我用过

export const wrapPageElement = ({ element }) => (
    <AnimatePresence exitBeforeEnter>{element}</AnimatePresence>
)

在gatsby-browser.js中，然后将布局内容包装在：

<motion.main
    initial={{
        opacity: 0,
        x: -200,
    }}
    animate={{
        opacity: 1,
        x: 0,
    }}
    exit={{
        opacity: 0,
        x: 200,
    }}
    transition={{
        type: 'spring',
        mass: 0.35,
        stiffness: 75,
        duration: 0.3,
    }}
>
    {children}
</motion.main>

不使用gatsby-plugin-intl一切正常：

在此处输入图像描述

但是当我开始使用 intl 包并且因为我将 Link 组件从

import { Link } from 'gatsby'

至

import { Link } from 'gatsby-plugin-intl'

成帧器运动的存在动画停止工作。卸载组件时没有任何动画。

在此处输入图像描述

我对此进行了一些搜索，并在 github 上找到了pull request 。由于那个时候包的代码被改变了，问题仍然存在。

现在 intl 的包 Link 的代码如下所示：

return _react.default.createElement(_gatsby.Link, (0, _extends2.default). 
({}, rest, {
  to: link,
  onClick: handleClick
}), children);

如何解决？

PSyarn add gatsby-plugin-intl安装版本 0.3.3。github repo 中的最新版本是 0.3.1。安装的代码与 repo 中的代码不同。

4

0 回答 0