gatsby - 盖茨比。Gatsby-plugin-intl 和 framer 运动 AnimatePresence 问题
问题描述
我需要创建多语言网站,并且需要使用成帧器动作来使用动画和页面转换。
我使用了最流行的 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 中的代码不同。
解决方案
推荐阅读
- shopify - 如何在液体shopify中生成随机数?
- r - 如何创建一个新变量,其值基于两个时间点之间的差异?
- function - 云功能的firestore路径
- github - 关于 github 工作流程的困惑
- python - getiing AttributeError:“NoneType”对象没有属性“文本”错误
- html - 如何
在 Yii2 mpdf 中将标签实际呈现为换行符 - sql - SQL - 带总和的语句条件分组
- excel - 性能问题“内存不足”Macro vba Excel - 解析数据
- java - MousePressed 和 MouseReleased 指的是同一个组件
- python - 对如何迭代这个 xpath 感到困惑