React CSS 转换不起作用并且类从未得到应用

Question

这是我在 React 中的方法 component.I 遵循了 http://reactcommunity.org/react-transition-group/css-transition/ 的所有提示，实际上也从中复制了 CSS 以查看它是如何工作的，但我似乎不能使它 work.It 似乎他们永远不会活跃 class 并且如果我从 React 开发人员工具切换道具它会退出完成并进入完成 class 但我没有那些classes.

我觉得我在 React 转换工作中遗漏了一些东西。

方法代码如下：

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

您需要通过向 CSSTransition 提供 classNames 属性来告诉 React Transition Group 您的 CSS 类名以什么开头。添加一个 classNames="message" 道具：

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

React CSS 转换不起作用并且类从未得到应用

React CSS Transition not working and classes never getting applied

reactjs

reactcsstransitiongroup

React CSS 转换不起作用并且 类 从未得到应用

React CSS Transition not working and classes never getting applied

reactjs

reactcsstransitiongroup

React CSS 转换不起作用并且类从未得到应用