Question

我正在使用NPM软件包（https://github.com/ryanhefner/react-scroll-trigger）在我正在建立的新网站上处理一些动画。我正在使用

    onEnter

和

    onExit

很好。但是，我想使用

    onProgress

prop可以在不同时间触发窗口中的多个动画，并在滚动时更改它们。我需要将它们附加到滚动位置。但是，作为JS的新手，我不完全了解该软件包编写的内容，就如何使用onProgress告诉我的函数进度的价值而言。有人可以帮助我了解我应该如何使用它吗？

    ...

    const AppContainer = styled.div`
      width: 100%;
    `;

    const Section1 = styled.div`
      width: 100%;
      height: 100vh;
      background-color: lightgray;
    `;

    const Section2 = styled.div`
      width: 100%;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
    `;

    const Heading = styled.h1`
      font-size: 50px;
      color: #270d61;
      opacity: ${props => props.visible === true ? "1" : "0"};
      transition: opacity 5000ms;
    `;

    class App extends React.Component {
        constructor(props) {
            super(props);

            this.state = {
                visible: false,
            }
        };

        onProgress = () => {
            //some functions here
        };

        render () {
            return (
                <AppContainer>
                    <Section1/>
                    <Section2>
                        <Heading visible={this.state.visible}>
                            <ScrollTrigger onProgress={this.onProgress()}/>
                            What's Up?
                        </Heading>
                    </Section2>
                </AppContainer>
            )
        }
    }

    export default App;

Answer 1

看起来<ScrollTrigger />组件是用来包装内容的。ScrollTrigger只不过是一个div，它根据{{1} }相对于视口。

这是一个对您有用的小演示...它显示了如何使用div，onProgess和onEnter事件（高级别）。

注意：我必须在新标签页中打开CodeSandbox窗口才能使它运行一半时间... you can try this link-如果不起作用，请打开Sandbox URL在新标签中。

希望这会有所帮助！

代码：

onExit

CSS

export default class AppScroller extends Component {
  state = {
    cssworld: "",
    cssfadein: "",
    progress: 0
  };

  onEnterViewport = () => {
    console.log("entered");
    this.setState({
      cssworld: "world",
      cssfadein: "fadeInText"
    });
  };

  onExitViewport = () => {
    console.log("exited");
    this.setState({
      cssworld: "",
      cssfadein: ""
    });
  };

  onProgress = e => {
    this.setState({
      progress: e.progress.toFixed(2)
    });
  };

  render() {
    const { progress, cssworld, cssfadein } = this.state;

    return (
      <div
        style={{
          height: "2000px",
          display: "flex",
          alignItems: "center"
        }}
      >
        <ScrollTrigger
          style={{
            border: "2px solid green",
            height: "10%",
            width: "100%"
          }}
          onEnter={this.onEnterViewport}
          onExit={this.onExitViewport}
          onProgress={this.onProgress}
        >
          <div style={{ display: "inline-block" }}>
            <img
              alt="world"
              className={cssworld}
              style={{ width: "100px" }}
              src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png"
            />
          </div>
          <div style={{ display: "inline-block" }}>
            <p className={cssfadein}>This is some text to fade in!</p>
          </div>
          <div
            style={{
              top: 0,
              left: 0,
              position: "fixed"
            }}
          >
            Progress: {progress * 100}%
          </div>
        </ScrollTrigger>
      </div>
    );
  }
}

在react-scroll-trigger中使用onProgress

1 个答案: