Want to animate a component being hidden/removed in react? Sure! Just use the enter and leave variants (though you should always render the TransitionGroup component):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var TheThing = React.createClass({ render() { var component; if (this.props.visible) { component = <div className="the-thing">The Thing</div>; } return ( <ReactCSSTransitionGroup transitionName="thing"> {component} </ReactCSSTransitionGroup> ) } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .thing-enter { opacity: 0.01; transition: opacity 1s ease-in; } .thing-enter.thing-enter-active { opacity: 1; } .thing-leave { opacity: 1; transition: opacity 1s ease-in; } .thing-leave.thing-leave-active { opacity: 0.01; } |
Here is a live demo: https://jsfiddle.net/BinaryMuse/3fkso0kq/
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
