我正在一个React AMP项目中,我需要使用AMP做一些微妙的动画,以便在滚动窗口时显示和隐藏按钮。
因为AMP动画标签期望<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中也不起作用。如果有人使用辅助词或我的代码有问题,请提出建议。