CODEWITHSUNDEEP
cssreactjscss-transitions
Boris Grunwald
Boris Grunwald

Reputation: 2722

(React) CSSTransition with css modules

I'm trying to implement a CSSTransition to a modal in my project. The problem is that I am using css modules.

My modal's render method

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

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

What do i pass to the classNames attribute in the CSSTransition component in order to make it work?

Upvotes: 11

Views: 11874

Answers (2)

Lucio
Lucio

Reputation: 5428

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

Gracias Lionel!

Upvotes: 19

Boris Grunwald
Boris Grunwald

Reputation: 2722

Solved by entering classes like this:

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

Upvotes: 7

Related Questions