React CSS 转换不起作用，类永远不会被应用答案

【问题标题】：React CSS Transition not working and classes never getting appliedReact CSS 转换不起作用，类永远不会被应用
【发布时间】：2018-07-23 23:39:11
【问题描述】：

这是我在 react 组件中的方法。我遵循了 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  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>

【问题讨论】：

styles.datesContainer 的评估结果是什么？它必须很多message。尝试直接输入message，而不是使用css-modules。
在复制粘贴时错过了 classNames 参数。将尝试用小提琴来让我更清楚。

标签： reactjs reactcsstransitiongroup

【解决方案1】：

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

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

【讨论】：

我接受了@Ross Allen 的答案作为正确答案。但是对于像我这样的潜在学习者的未来参考，我想补充一点，如果您开始使用 webpack css loader 并尝试在 CSStransition 中使用 classNames ，不要忘记在 index.html 中链接你的样式表，我想为什么我的班级没有出现，因为我没有出现，并且疯狂地盯着屏幕好几个小时，希望动画出现。
另外，当数组被渲染时，动画仍然无法正常工作，但如果我在反应开发者工具中切换“in”道具，我可以看到动画。所以，我想我弹出 div 的想法是有缺陷的，我必须以不同的方式处理它。
终于让它工作了。经验教训 CSStransition 组件应该已经在 DOM 中，然后我们在其中渲染一个数组。如果我们尝试用数组渲染 CSSTransition 组件..不起作用。