Не удалось получить анимацию для работы с AMP и React - PullRequest
Новая
       16

Не удалось получить анимацию для работы с AMP и React

0 голосов
/ 26 марта 2019

Я работаю над проектом 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. Если у кого-то есть альтернатива или что-то не так в моем коде, пожалуйста, предложите.

...