Question

我正在开发一个使用react-page-scroller和react-reveal的网站。当用户向下滚动时，页面滚动器将整个视口替换为下一个“页面”。 React在每个页面上显示动画文本。

我已经在Chrome中开发了该网站，并且动画效果完美。但是，当我在Firefox和Safari中测试站点时，页面滚动仍然表现出预期的效果，但是反应显示动画仅出现在第一页上。在其他页面上，显示未触发，每个元素的不透明度保持为0。

我尝试在react-reveal元素上使用“ appear”道具来显示页面何时更改。 react-reveal库已报告Safari中“溢出：隐藏”的问题，react-page-scroller自动应用该问题。我尝试将其更改为“可见”，但没有任何区别。任何帮助将不胜感激！

我已经创建了一个简单的文件来演示这一点。运行create-react-app，然后运行npm install react-reveal react-page-scroller @material-ui/core。最后，将App.js替换为以下内容：

App.js

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import ReactPageScroller from 'react-page-scroller';
import Fade from 'react-reveal/Fade';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 1
    };
    this._pageScroller = null;
  }

  pageOnChange = (number) => {
    this.setState({ currentPage: number });
    console.log('on page:', this.state.currentPage);
  }

  render() {
    const { classes } = this.props;

    return (
      <div className="App">
        <ReactPageScroller ref={c => this._pageScroller = c} pageOnChange={this.pageOnChange}>
          <div className={classes.page}>
            <Fade top delay={500} duration={2000}>
              <h1>
                Testing Fade Animation 1
              </h1>
            </Fade>
          </div>
          <div className={classes.page}>
            <Fade top delay={500} duration={2000}>
              <h1>
                Testing Fade Animation 2
              </h1>
            </Fade>
          </div>
        </ReactPageScroller>
      </div>
    );
  }
}

const styles = {
  page: {
    webkitBackfaceVisibility: "hidden",
    background: "white",
    minHeight: "100vh",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "calc(10px + 2vmin)",
    color: "black",
  },
};

export default withStyles(styles)(App);

React动画无法与页面滚动器一起使用

0 个答案: