无法让动画与 AMP 和 React 一起使用

Question

我正在开发一个 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 中也不起作用。 如果有人有替代方案或我的代码有问题，请提出建议。

Answer 1

amp-animation 期望 JSON 作为子对象，而不是 Javascript 对象。 （它们在语法上相似，但不同。）即使您使用 JSON 语法编写对象，showAnim 和 hideAnim 最终也会被 javascript 解释为对象。您可以使用 JSON.stringify() 将它们转换为 JSON。

如果您查看他们的examples 之一，可以暂时简化您的问题。

<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 >

Answer 2

AMP 不允许定义自定义 javascript（无限 js）和自定义事件侦听器，on 属性除外）。您可以使用 amp-bind 组件和 amp-script 组件在 AMP 中实现一些动态功能