13

v4 ドキュメントで提供されているアニメーション遷移の例は、同じコンポーネントのフェードインとフェードアウト、および背景色の調整を示しているため、少し複雑に思えます。

この手法を、あるコンポーネントをフェードアウトして別のコンポーネントをフェードインするより現実的な例に適用しようとしていますが、適切に機能させることはできません (最初のコンポーネントのみがフェードアウトし、2 つ目のコンポーネントがポップするようです)。であり、このトランジションは一方向にしか機能しません ([戻る] ボタンではトランジションは発生しません)。

これは私のコードでMatchWithFade、例からの削除されたバージョンを使用しています:

import React from 'react';
import { TransitionMotion, spring } from 'react-motion'
import { HashRouter, Match, Miss } from 'react-router';
import Home from './components/Home';
import Player from './components/Player';
import FormConfirmation from './components/FormConfirmation';

const App = () => (
  <HashRouter>
    <div className="App">
      <MatchWithFade exactly pattern="/" component={Home} />

      <MatchWithFade pattern="/player/:playerId" component={Player} />

      <MatchWithFade pattern="/entered" component={FormConfirmation} />

      <Miss render={(props) => (
        <Home players={Players} prizes={Prizes} {...props} />
      )} />
    </div>
  </HashRouter>
);

const MatchWithFade = ({ component:Component, ...rest }) => {
  const willLeave = () => ({ zIndex: 1, opacity: spring(0) })

  return (
    <Match {...rest} children={({ matched, ...props }) => (
      <TransitionMotion
        willLeave={willLeave}
        styles={matched ? [ {
          key: props.location.pathname,
          style: { opacity: spring(1) },
          data: props
        } ] : []}
      >
        {interpolatedStyles => (
          <div>
            {interpolatedStyles.map(config => (
              <div
                key={config.key}
                style={{...config.style}}
              >
                <Component {...config.data}/>
              </div>
            ))}
          </div>
        )}
      </TransitionMotion>
    )}/>
  )
}

export default App;

この質問はこれとほぼ同じですが、実際には質問に答えていない受け入れられた回答があります。

4

4 に答える 4

1

react-motion大規模なアプリケーションには適していません。react-transition-group代わりに使用してください。

トランジションを実行するためにreact-motion使用するためです。javascript呼び出しを行うAPIと、トランジションはパスを横断し (同期呼び出しjs)、新しいページにルーティングするときにトランジションが遅延します。遷移を実行するためにreact-transition-group使用する場所。CSS

于 2018-09-12T09:08:13.650 に答える