Question

我正在尝试将gsap用于动画，并希望在提供的函数上调用它们。输入者可以工作，但是无法激发已退出的和已退出的人。我在点击时设置了一个状态变量以将其更改为false，但不会重新呈现。我是否缺少某些东西，因为我在文档中看不到任何东西

constructor(props) {
    super(props);
    this.state = {in: true};

    this.handleClick = this.handleClick.bind(this);
  }
  onEnter(node, isAppearing, event) {
    console.log("on enter")
    TweenMax.killTweensOf(node);
    TweenLite.set(node, {
      x: '800px',
      onCompleteParams: [node]
    });
    // animate in the element
    TweenLite.to(node, 1, {
      x: '0px',
      onCompleteParams: [node]
    });
  }

  onEntered() {
    console.log("on entered")
  }

  onExit() {
    console.log("on exit")
  }

  onExiting() {
    console.log("on exiting")
  }

  handleClick(e) {
    e.preventDefault();
    this.setState({ in: false });
    console.log("click")

  }

  render() {
    const show  = this.state.in;

    return (

          <div className="row">
            <div className={styles.items}>
            <TransitionGroup>
              <Transition
                timeout={{
                  enter: 300,
                  exit: 500,
                 }}
                appear={true}
                in={show}

                onEntered={this.onEntered}
                onExiting={this.onExiting}
                onExit={this.onExit}
                onEnter={(node, isAppearing, event) => {
                  this.onEnter(node, isAppearing, event)
                 }}
                >
                <Link
                    to="/sub-page"
                    className={styles.item}
                    onClick={this.handleClick}
                  >
                    <div className={styles.itemimagecontainer}>
                      <img
                        src={image}
                        className={styles.itemimage}
                        alt="Sonovate"
                      />
                    </div>
                    <div className={styles.itemcontent}>
                      <h3 className="heading-small">Title</h3>
                    </div>
                  </Link>
              </Transition>
            </TransitionGroup>
</div>
</div>

编辑：只是为了在我的app.js中添加有关构建的更多信息，我就有了

return (
      <Router>
        <div>
        <TransitionGroup>
          <Transition
              timeout={500}
              appear={true}
              mountOnEnter={true}
              unmountOnExit={false}
              onEnter={(node, isAppearing, event) => {
               this.onEnter(node, isAppearing, event)
              }}
              onExit={(node) =>{
                this.onExit(node)
              }}
            >
            <div id={"wrapper"} style={divStyle}>
              <Header toScroll={this.toScroll}></Header>
              <Route path="/" render={props => <AppRoutes {...props}/> }/>
              <ScrollTop className={this.props.className} onClick={this.scrollTop}></ScrollTop>
            </div>
          </Transition>
        </TransitionGroup>
        <Canvas></Canvas>
        </div>
      </Router>
    );

因此，这会在整个页面上做一个很好的过渡，并且顶部的先前代码是路由（主页）的一部分

使用gsap反应过渡组，没有调用Exiting和Exited

0 个答案: