web-dev-qa-db-ja.com

ReactCSSTransitionGroupは、新しいコンポーネントでのアニメーションでのみ有効ですか？

ReactCSSTransitionGroupは正常に動作しています（私は思います）。新しくマウントされたコンポーネントは、その栄光の中でフェードインします。

問題は、交換するコンポーネントが突然消えてしまうことです。これは、最終的にはコンポーネントをビューポートに出し入れしたいので、私にとっては問題です...

離れるコンポーネントにエレガントに消える方法を教える方法が見当たらないようです。

何かが足りないのですか、それともReactCSSTransitionGroupは着信コンポーネントのみをアニメーション化できますか？

[〜＃〜] update [〜＃〜]

以下のコード：

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;
}
reactjsreactcsstransitiongroup
9
Stefan

わかりました、彼らはすでにそれがうまくいったようです、そして私は今までそれを発見しませんでした。

React-Router gitリポジトリには例のリストがあり、その中には「アニメーション」用のものがあります。このデモは、要素のクローンを作成してキーを割り当てることにより、ReactCSSTransitionGroupを活用して「ページ」の入出力をアニメーション化する方法を示しています。

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

4
Stefan

bin を作成しました。これは、マウントされている/マウントされていないコンポーネントに対して正常に機能します。見て、それがあなたがしていることと似ていて、それでも問題を解決できないかどうか私に知らせてください

2
Aditya Singh