2

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>
code_tinkerer
  • 69
  • 1
  • 10
  • 1
    whats `styles.datesContainer` evaluating to? it must much `message`. Try put in `message` directly instead of using css-modules. – damanptyltd Jul 24 '18 at 00:08
  • 1
    Missed the classNames parameters as i was copy pasting.will try to come with a fiddle so that i can be more clear. – code_tinkerer Jul 24 '18 at 01:04

1 Answers1

4

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>
Ross Allen
  • 43,772
  • 14
  • 97
  • 95
  • 2
    I accepted the @Ross Allen answer as the right answer.But future reference for prospective learners like me,I would like to add that if you start using webpack css loader and try to use classNames in CSStransition ,dont forget to link your stylesheet in index.html and I was like why isn't my class showing up as I hadn't and was staring at the screen for crazy for hours in a hope of animation appearing. – code_tinkerer Jul 24 '18 at 11:21
  • Also,animations are still not functioning as the array is rendered but I can see animation if i toggle "in" props in react developer tools.So,I guess my ideas of popping divs is flawed and I have to approach it in a different way. – code_tinkerer Jul 24 '18 at 11:24
  • 4
    Finally got it to work.Lesson learned CSStransition component should already be in DOM and then we render an array inside it.If we try to render CSSTransition component as well with the array..doesnt work. – code_tinkerer Jul 24 '18 at 12:05