javascript - 无法让动画与 AMP 和 React 一起使用
问题描述
我正在做一个 React AMP 项目,我需要用 AMP 做一些微调动画,以便在窗口滚动时显示和隐藏一个按钮。
由于 AMP Animation 标记需要子对象中的对象,<amp-animation>
但React
不允许对象作为子对象。
这是我正在尝试的代码:
import React from 'react';
const showAnim = {
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [
{
"selector": "#download-button",
"keyframes": [
{ "opacity": "1", "visibility": "visible" }
]
}
]
}
const hideAnim = {
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [
{
"selector": "#download-button",
"keyframes": [
{ "opacity": "0", "visibility": "hidden" }
]
}
]
};
export default class Animate extends React.Component {
componentDidMount() {
window.addEventListener('scroll', this.onScroll)
}
onScroll = () => {
console.log('scrolling')
}
renderShowAnimation = () => <amp-animation id="showAnim" layout="nodisplay" src="">
<script type="application/json">
{showAnim}
</script>
</amp-animation >;
renderHideAnimation = () => <amp-animation id="showAnim" layout="nodisplay">
<script type="application/json">
{hideAnim}
</script>
</amp-animation >;
render() {
return (
<main onScroll={this.onScroll} >
<div>
{this.renderShowAnimation()}
{this.renderHideAnimation()}
<div className="download-button" id="download-button" role="button">
Download
<amp-position-observer
on="enter:hideAnim.start; exit:showAnim.start"
layout="nodisplay">
</amp-position-observer>
</div>
</div>
</main>
)
}
}
现在,当我尝试运行该应用程序时,出现以下错误:
Objects are not valid as a React child (found: object with keys {duration, fill, iterations, direction, animations}).
我也尝试放置一个onScroll
事件,但它在 AMP 中也不起作用。如果有人有替代方案或者我的代码有问题,请提出建议。
解决方案
amp-animation
期望 JSON 作为子对象,而不是 Javascript 对象。(它们在语法上相似,但不同。)即使您以 JSON 语法编写对象,showAnim
最终hideAnim
被 javascript 解释为对象。您可以使用JSON.stringify()
.
如果您查看其中一个示例,请先简化您的问题。
<amp-animation layout="nodisplay">
<script type="application/json">
{
"selector": "#target-id",
"duration": "1s",
"keyframes": {"opacity": 1}
}
</script>
</amp-animation>
问题是如果你将它粘贴到 React 的渲染方法中,你会得到错误,因为{
转义了 jsx 并且它现在需要 javascript。解决此问题的一种方法是使用 React 的dangerouslySetInnerHTML
.
<amp-animation layout="nodisplay">
<script type="application/json" dangerouslySetInnerHTML={{__html:
JSON.stringify(
{
"selector": "#target-id",
"duration": "1s",
"keyframes": {"opacity": 1}
}
)
}}>
</script>
</amp-animation>
在您的情况下,您可以将两个功能更改为
renderShowAnimation = () => <amp-animation id="showAnim" layout="nodisplay" src="">
<script type="application/json" dangerouslySetInnerHTML={{__html: JSON.stringify(showAnim)}}>
</script>
</amp-animation >;
renderHideAnimation = () => <amp-animation id="showAnim" layout="nodisplay">
<script type="application/json" dangerouslySetInnerHTML={{__html: JSON.stringify(showAnim)}}>
</script>
</amp-animation >
推荐阅读
- python - Python NetworkX:加权图中的边缘颜色
- javascript - 在汇总配置中,如何使用 moduleSideEffects 导入副作用文件及其依赖项?
- python - 在线程上从 Python 调用 Julia
- php - 如何为 preg_replace_callback() 编写有效回调:需要参数 2,''s:'.strlen('$2').':"$2";'',
- python - 从字典列表中提取列表
- python - 如何基于多列创建唯一标识符?
- postgresql - 为什么子查询中的 distinct on 会损害 PostgreSQL 的性能?
- c# - 使通过 C# 代码添加的 TabItems 自动调整大小
- python - 使用 SQLAlchemy 写入 SQL Server 非常慢
- java - 在 selenium 中管理 URL 重定向