Реагировать CSS группа переходов - Как установить className при использовании post css и CX?

Question

Вот мой код:

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

Как использовать массив стилей для установки классов в группе переходов? Я попытался установить классы как styles['example-enter'], styles['example-leave'] et c. но не повезло. Кроме того, мой обработчик onEnter не работает!

Примечание. Это classNames для перехода и className для CX, так что это не опечатка.

Answer 1

Я вместо этого использовал Transition. Подвох заключался в том, что значение in необходимо переключать, установка значения true всегда не работает. Я думаю, что тот же принцип должен работать и для CSSTransition.

// 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>

Answer 2

попробуйте это в CSSTransition:

classNames='example'

и в css:

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