React CSS Transition не работает и классы никогда не применяются

Question

Это мой метод в компоненте реагирования. Я следовал всем советам http://reactcommunity.org/react-transition-group/css-transition/ и фактически скопировал из этого CSS-код, чтобы увидеть, как он работает, но я просто кажется, не может заставить его работать. Кажется, что они никогда не получают активный класс, и если я переключаю реквизит из инструментов реагирования разработчика, он получает выходной и входной классы, но у меня нет этих классов.

У меня такое ощущение, что я что-то упускаю по реакциям переходных работ.

Вот код метода:

onSelectYear(event){
    const selected_year = event.target.value;
    const newState = (() => {
        let array_to_render = [];
        let selected_object = data[selected_year];
        for( var items in selected_object) {
                array_to_render.push(
                <CSSTransition key = {selected_year+items}
                       in = {true}
                       timeout = {300}>
                    <div  className = {styles.datesContainer}>
                        <a key = {items} onClick = {this.props.updateDetailView}>
                             {items}
                        </a>

                    </div>
                </CSSTransition>
                )

         }

        return array_to_render
    })();
    this.props.selected_month ?
        this.props.updateSearchView({data:data,search_view:newState,selected_year:selected_year,
        latest_update:latest_data["update_date"],selected_month:"" }) :
        this.props.updateSearchView({data:data,search_view:newState,selected_year:selected_year,
        latest_update:latest_data["update_date"]})
}

и CSS:

.message-enter {
opacity: 0.01;
transform: scale(0.9) translateY(50%);
}
.message-enter-active {
opacity: 1;
transform: scale(1) translateY(0%);
transition: all 300ms ease-out;
}
.message-exit {
opacity: 1;
transform: scale(1) translateY(0%);
}
.message-exit-active {
opacity: 0.01;
transform: scale(0.9) translateY(50%);
transition: all 300ms ease-out;
}

Метод вызывается на элементе select.

          <select  value = {this.props.selected_year? 
          this.props.selected_year:"0"} onChange = {this.onSelectYear}>
                <option value = "0" >Select Year</option>
                <option value = "2016">2015-2016</option>
                <option value = "2017">2016-2017</option>
                <option value = "2018">2017-2018</option>
            </select>

Answer 1

Вы должны сообщить React Transition Group, с чего начинаются ваши имена классов CSS, предоставив classNames опора для CSSTransition, Добавить classNames="message" проп:

<CSSTransition
  classNames = "message"
  key = {selected_year+items}
  in = {true}
  timeout = {300}>
</CSSTransition>