CODEWITHSUNDEEP
reactjsreactcsstransitiongroup
code_tinkerer
code_tinkerer

Reputation: 69

React CSS Transition not working and classes never getting applied

This is my method in react component.I have followed all the tips from http://reactcommunity.org/react-transition-group/css-transition/ and actually copied the CSS from that as well to see how it works but I just cant seem to make it work.It seems like they never get active class and if i toggle the props from react developer tools it gets exit-done and enter-done class but I don't have those classes.

I have the feeling that I am missing something on react transitions works.

Here's the method code:

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"]})
}

and the 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;
}

The method gets called on select element.

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

Upvotes: 2

Views: 8971

Answers (1)

Ross Allen
Ross Allen

Reputation: 44880

You need to tell React Transition Group what your CSS classnames start with by providing the classNames prop to CSSTransition. Add a classNames="message" prop:

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

Upvotes: 4

Related Questions