Can React animate a component being hidden/removed?

Question

I know that using ReactCSSTransitionGroup you can apply it to a list of items and have then animate as they appear or disappear. What about a single component though?

See JSFiddle here, where I've got a CSS animation when the item appears. But I don't know if there's a way to make it animate upon being hidden.

https://jsfiddle.net/eq263rk2/

Answer 1

Sure! Just use the enter and leave variants (though you should always render the TransitionGroup component):

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>
        )
    }
});

and

.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;
}

Example: https://jsfiddle.net/BinaryMuse/3fkso0kq/