javascript - 在react-scroll-trigger中使用onProgress

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根据 div 的位置启动杂项事件相对于视口(viewport)。

这是一个应该对您有用的小演示...它展示了如何使用 onProgess , onEnter ，和onExit事件(高级别)..

注意:我必须在新选项卡中打开 CodeSandbox 窗 Eloquent 能正常工作... you can try this link - 如果这不起作用，只需在新选项卡中打开沙盒 URL..

希望这有帮助!

代码:

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>
    );
  }
}

CSS

.world {
  -webkit-animation: spin1 5s linear;
  -moz-animation: spin1 5s linear;
  -o-animation: spin1 5s linear;
  -ms-animation: spin1 5s linear;
  animation: spin1 5s linear;
  display: block;
}

@-webkit-keyframes spin1 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin1 {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes spin1 {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}
@-ms-keyframes spin1 {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
  }
}
@keyframes spin1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.fadeInText {
  margin-top: 25px;
  font-size: 21px;
  text-align: center;
  animation: fadein 5s;
  -moz-animation: fadein 5s; /* Firefox */
  -webkit-animation: fadein 5s; /* Safari and Chrome */
  -o-animation: fadein 5s; /* Opera */
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadein {
  /* Firefox */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  /* Safari and Chrome */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadein {
  /* Opera */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}