ReactCSSTransitionGroup 只适用于新组件中的动画吗？

Question

我有 ReactCSSTransitionGroup 工作正常（我认为），新安装的组件在它所有的荣耀中淡出。

问题是被替换的组件突然消失了，这对我来说是个问题，因为最终我希望我的组件在视口中进出过渡...

我似乎没有看到任何方式告诉离开组件如何优雅地消失。

我是不是遗漏了什么或者 ReactCSSTransitionGroup 只能为传入的组件设置动画？

更新

代码如下：

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, hashHistory, Link } from "react-router";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";


class PageOne extends React.Component {
  render() {
    return (
      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
        <div>
          HI FROM PAGE ONE<br />
          <br />
          <Link to="two">Take me to Page Two</Link>
        </div>
      </ReactCSSTransitionGroup>
    );
  }
}
class PageTwo extends React.Component {
  render() {
    return (
      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
        <div>
          HELLO FROM PAGE TWO<br />
          <br />
          <Link to="/">Go back to Page One</Link>
        </div>
      </ReactCSSTransitionGroup>
    );
  }
}


const app = document.getElementById('app');
ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={PageOne}></Route>
    <Route path="two" component={PageTwo}></Route>
  </Router>,
app);

和 CSS:

.example-enter {
  opacity: 0.01;
}
.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.example-leave {
  opacity: 1;
}
.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

Answer 1

我创建了一个 bin，它可以很好地安装/卸载组件。看一看，如果和你做的类似，还不能解决问题，请告诉我

Answer 2

好的，看起来他们已经解决了，我只是直到现在才发现它。

React-Router git 存储库有一个示例列表，其中有一个用于 "Animation"。此演示展示了如何利用 ReactCSSTransitionGroup 通过克隆元素和分配键来为 in/out "Pages" 设置动画。

https://reacttraining.com/react-router/web/example/animated-transitions

ReactCSSTransitionGroup 只适用于新组件中的动画吗？

ReactCSSTransitionGroup only good with animating in new component?

reactjs

reactcsstransitiongroup