React 可以为隐藏/删除的组件设置动画吗？答案

【问题标题】：Can React animate a component being hidden/removed?React 可以为隐藏/删除的组件设置动画吗？
【发布时间】：2015-09-19 21:49:07
【问题描述】：

我知道使用ReactCSSTransitionGroup 您可以将其应用于项目列表，然后在它们出现或消失时进行动画处理。但是单个组件呢？

在此处查看 JSFiddle，当项目出现时，我有一个 CSS 动画。但我不知道有没有办法让它在被隐藏时变成动画。

https://jsfiddle.net/eq263rk2/

【问题讨论】：

标签： reactjs

【解决方案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/

【讨论】：

啊！我的印象是enter/leave 是一个项目列表，appear 是一个项目。那么appear 的意义何在？它有何不同？
@ffxsam appear 用于项目的初始外观，如果您使用transitionAppear - 也就是说，如果TransitionGroup 和它的孩子已经安装 i> 当包含组件安装时，除非设置了transitionAppear，否则它不会动画。尝试在您的示例中设置{thingIsVisible: true}，然后在我的示例中设置。