css - Easing out transition in React -

i'm starting react , running issue expecting quite simple. i'm trying have block of text fade in , fade out based on simple trigger, can't fade out.

the code below , i've got button makes message appear. fading in fine , disappearing after 2 seconds, expecting message fade out upon leaving... i'm misunderstanding meaning of in react-ish transition css.

here react component:

class messagesender extends react.component {   render() {     let sent_element = null;     if (this.state.linksent) {       sent_element = <animatedtext/>;     }   return (     <div>       {sent_element}     </div>   );       //a fetch triggers:     ...then((json) => {       if (json.success) {         _this.setstate({           linksent: true         })         settimeout(             function(){               _this.setstate({linksent:false});             },2000         )       }     }); }  class animatedtext extends react.component {   render() {     return <reacttransitiongroup transitionappear={true} transitionname="fadeinout">       <div>sent!</div>     </reacttransitiongroup>;   } } 

here css:

.fadeinout-appear {   opacity: 0.01;   transition: opacity 0.4s ease-in-out;   -webkit-transition: opacity 0.4s ease-in-out; }  .fadeinout-appear.fadeinout-appear-active {   opacity: 1; }  .fadeinout-leave {   opacity: 1;   transition: opacity 0.4s ease-in-out;   -webkit-transition: opacity 0.4s ease-in-out; }  .fadeinout-leave.fadeinout-leave-active {   opacity: 0.01; } 

you should using reactcsstransitiongroup, high level api around reacttransitiongroup

import `reactcsstransitiongroup` "react-addons-css-transition-group"; 

in react > v0.14, must pass transitionentertimeout transitionleavetimeoutand optionally transitionappeartimeout props component if have transitionappear enabled (which do).

lastly, need pass key-attribute animated children

you must provide key attribute children of reactcsstransitiongroup, when rendering single item. how react determine children have entered, left, or stayed.

you might have refactor code bit reactcsstransitiongroup not inside <animatedtext >, instead wrapped around {sent_element}

see react/animation-docs more information.