Question

这是我在react组件中的方法。我遵循了http://reactcommunity.org/react-transition-group/css-transition/的所有技巧，并从中实际上复制了CSS以了解其工作原理，但我似乎无法使其工作。他们永远不会获得活动的类，如果我从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  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

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

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

React CSS Transition无法正常工作，并且永远不会应用类

1 个答案: