ReactCSSTransitionGroup 似乎没有应用动画

Question

我正在开发我的第一个 React 应用程序，我正在尝试在“页面”（我正在添加和删除的顶级组件）之间进行简单的淡入淡出转换。我正在研究看似非常简单的例子here

我的渲染方法如下所示：

render: function() {
    var currentPage;
    switch (this.state.currentPage) {
        case pages.DASHBOARD:
            currentPage = <Dashboard />;
            break;
        case pages.PROFILE:
            currentPage = <Profile />;
            break;
    }

    var currentPageDiv = <div key={currentPage}> {currentPage} </div>;

    return (
        <div className = 'App'>
            <Header />
            <ReactCSSTransitionGroup transitionName="pageChange">
                {currentPageDiv}
            </ReactCSSTransitionGroup>
            <Footer />
        </div>
    );
},

CSS 看起来像这样：

.pageChange-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.pageChange-enter.pageChange-enter-active {
  opacity: 1;
}

.pageChange-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.pageChange-leave.pageChange-leave-active {
  opacity: 0.01;
}

当状态更新时，页面会按照应有的方式转换到其他页面。但是过渡只是“弹出”，与我添加 TransitionGroup 代码之前的方式相同（因此，TransitionGroup 代码似乎没有任何功能效果）。我犯了什么菜鸟错误？

Answer 1

将您的 key 更改为一个简单的字符串，而不是您当前拥有的 React 组件。例如：

var currentPageDiv = <div key={this.state.currentPage}> {currentPage} </div>;