reactjs - 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>;