2

我正在尝试将 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>
    );

所以这在整个页面上做了一个很好的小转换，顶部的前一个代码是路由的一部分（主页）

4

0 回答 0