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代码没有任何功能效果）。我在做什么noob错误？

Answer 1

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

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

ReactCSSTransitionGroup似乎没有应用动画

1 个答案: