可以对隐藏/删除的组件进行React动画处理吗？

Question

我知道使用ReactCSSTransitionGroup你可以将它应用到项目列表中,然后在它们出现或消失时进行动画处理.虽然单个组件怎么样？

请看这里的JSFiddle,当项目出现时,我有一个CSS动画.但是我不知道是否有办法让它在被隐藏时变得有生气.

https://jsfiddle.net/eq263rk2/

Answer 1

当然!只需使用enter和leave变体(尽管你应该总是渲染TransitionGroup组件):

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

和

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

示例:https://jsfiddle.net/BinaryMuse/3fkso0kq/