Question

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

我的模态的渲染方法

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属性以使其起作用？

Answer 1

通过输入如下类来解决：

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

Answer 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模块：

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

Gracias Lionel！

（反应）CSSTransition与CSS模块

2 个答案: