(React) 带有 css module的 CSSTransition

IT技术 css reactjs css-transitions
2021-04-29 17:14:30

我正在尝试在我的项目中对模态实现 CSSTransition。问题是我正在使用 css module。

我的模态渲染方法

render() {
        return (
            <Aux>
                <Backdrop
                    show={this.props.show}
                    clicked={this.props.modalClosed}/>
                <CSSTransition
                    in={this.props.show}
                    timeout={1000}
                    mountOnEnter
                    unmountOnExit
                    classNames={?}
                >
                    <div
                        className={classes.Modal}
                    >
                        {this.props.children}
                    </div>
                </CSSTransition>
            </Aux>
        )
    }

我的 Modal.css

    .fade-enter {

    }

    .fade-enter-active {
        animation:openModal 0.4s ease-out forwards;
    }

    .fade-exit{

    }

    .fade-exit-active{
        animation: closeModal 0.4s ease-out forwards;
    }

为了使其工作，我将什么传递给 CSSTransition 组件中的 classNames 属性？

2个回答

JSX：

  <CSSTransition in={focused} timeout={500} classNames={{
    enterActive: styles.MyClassEnterActive,
    enterDone: styles.MyClassEnterDone,
    exitActive: styles.MyClassExit,
    exitDone: styles.MyClassExitActive
  }}>
    <span className={styles.MyClass}>animated</span>
  </CSSTransition>

CSS module：

.MyClass {
  position: absolute;
  left: 5px;
}
.MyClassEnterActive {
  left: 15px;
  transition: left 500ms;
}
.MyClassEnterDone {
  left: 15px;
}
.MyClassExit {
  left: 15px;
}
.MyClassExitActive {
  left: 5px;
  transition: left 500ms;
}

感谢莱昂内尔！

通过输入这样的类来解决：

    render() {
        return (
            <Aux>
                <Backdrop
                    show={this.props.show}
                    clicked={this.props.modalClosed}/>
                <CSSTransition
                    in={this.props.show}
                    timeout={1000}
                    mountOnEnter
                    unmountOnExit
                    classNames={{
                        enterActive: classes["fade-enter-active"],
                        exitActive:classes["fade-exit-active"]
                    }}
                >
                    <div
                        className={classes.Modal}
                    >
                        {this.props.children}
                    </div>
                </CSSTransition>
            </Aux>
        )
    }
其它你可能感兴趣的问题
上一篇如何在pageInfo中将总计数传递给客户端 下一篇TypeScript：接口不能同时扩展两种类型