Reagent conversion elimination

Question

I am just starting out with React and running into a problem with something that I expected to be pretty simple. All I'm trying to do is make the block of text fade out and then fade based on a simple trigger, but I can't make it fade.

Below is the code, and I have a button displaying a message. It disappears in excellent condition and disappears after two seconds, but I expected the message to disappear after leaving ... but I definitely do not understand the meaning of this in the transition using React-ish.

Here is the 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 then 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 is the 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;
}

Answer 1

You should use ReactCSSTransitionGrouphigh-level APIs aroundReactTransitionGroup

import `ReactCSSTransitionGroup` from "react-addons-css-transition-group";

React > v0.14 transitionEnterTimeout transitionLeaveTimeout transitionAppearTimeout , transitionAppear ( ).

, key -attribute

ReactCSSTransitionGroup, . React , , .

, , ReactCSSTransitionGroup <AnimatedText >, {sent_element}

. React/Animation-docs.

Answer 2

. lib, GitHub https://github.com/chenglou/react-motion