React CSS transitions group - How to set className when using post css and CX?

Question

Here is my code:

import styles from 'styles.css';
// other code

render() {
    return <CSSTransition
            classNames= {{
            enter: 'example-enter',
            enterActive: 'example-enter-active',
            exit: 'example-leave',
            exitActive: 'example-leave-active'
           }}
           in={true}
           timeout={300}
           onEnter = { () => console.log('mounting') }
           unmountOnExit
           >
           <div className={styles['someclass']}>Will animate</div>
           </CSSTransition>
}

How I use the styles array for setting classes on the transition group? I have tried setting the classes as styles['example-enter'], styles['example-leave'] etc. but no luck. Additionally my onEnter handler doesn't work!

Note: It is classNames for the transition and className for CX, so it is not a typo.

Answer 1

try this in CSSTransition:

classNames='example'

and in the css:

.example-enter {}
.example-enter-active {} ...

Answer 2

I ended up using Transition instead. The catch was that the in value needs to be toggled, setting it to true always doesn't work. I think the same principle should work for CSSTransition as well.

// I am toggling animationProps.in based on some custom logic
<Transition
 in={this.state.animationProps.in}
 timeout={this.state.animationProps.duration}
 onExited={this.animationEnd}>
    {state => (
        <div style={{
          ...this.state.animationProps.defaultStyle,
          ...this.state.animationProps.transitionStyles[state]
        }}>
            My markup will go here.
        </div>
      )} 
</Transition>