React Router 4とReact Transition Group 2.3を使用したページアニメーション

Question

React Router 4とReact Transition Group 2を使用しています。*ページ遷移時に終了トランジション/アニメーションを設定することはできません。私が移行イベントをログに記録すると、私はページ遷移を開始するとすぐにトリガされる終了イベントを取得します。

フェードトランジション：

import React, { Component } from 'react' 
import Transition, { 
    ENTERING, 
    ENTERED, 
    EXITING, 
    EXITED, 
} from 'react-transition-group/Transition' 

// can be set globaly, just duration = 500 
const duration = 300 

const defaultStyle = { 
    transition: `all ${duration}ms ease-in-out`, 
    color: 'white', 
    opacity: 0, 
    marginTop: '82px', 
} 

const transitionStyles = { 
    [ENTERING]: { 
    opacity: 0, 
    marginTop: '82px', 
    }, 
    [ENTERED]: { 
    opacity: 1, 
    marginTop: '62px', 
    }, 
    [EXITING]: { 
    opacity: 1, 
    marginTop: '62px', 
    }, 
    [EXITED]: { 
    opacity: 0, 
    marginTop: '82px', 
    }, 
} 

class FadeTransition extends Component { 
    handleExit = elem => { 
    console.log('handleExit') 
    } 

    handleExiting = elem => { 
    console.log('handleExiting') 
    } 
    render() { 
    const { in: inProp, children } = this.props 

    return (
     <Transition 
     in={inProp} 
     timeout={duration} 
     appear={true} 
     exit={false} 
     onExit={this.handleExit} 
     onExiting={this.handleExiting} 
     > 
     {(state, props) => 
      React.cloneElement(children, { 
      ...props, 
      style: { 
       ...defaultStyle, 
       ...transitionStyles[state], 
      }, 
      })} 
     </Transition> 
    ) 
    } 
} 

export default FadeTransition 

App.jsファイル：

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="TopBar"> 
      <Link to="/">Home</Link> 
      <Link to="/subpage">Subpage</Link> 
     </div> 
     <Route 
      {...this.props} 
      render={({ location }) => 
      <TransitionGroup component="main"> 
       <FadeTransition in={false}> 
       <Switch location={location} key={location.key}> 
        <Route 
        exact 
        path="/" 
        children={({ match, ...rest }) => <Home {...rest} />} 
        /> 
        <Route 
        path="/subpage" 
        children={({ match, ...rest }) => <Subpage {...rest} />} 
        /> 
       </Switch> 
       </FadeTransition> 
      </TransitionGroup>} 
     /> 
     </div> 
    ) 
    } 
} 

そして最後に、ホームのファイル：

class Home extends Component { 
    render() { 
    return (
     <FadeTransition in={true} key={'home'}> 
     <div className="page"> 
      <h1>Home</h1> 
      <p>Hello from the home page!</p> 
     </div> 
     </FadeTransition> 
    ) 
    } 
} 

Answer 1

ように、あなたはFadeTransitionコンポーネントにキーを追加する必要がありますTransitionGroupは、子が変更されてアニメーションをトリガーすることを確認します

このようにする必要があります

<TransitionGroup className="page-animation-container"> 
    <FadeTransition key={location.key} in={false}> 
     <Switch location={location}> 
      <Route 
       exact 
       path="/" 
       children={({ match, ...rest }) => <Home {...rest} />} 
      /> 
      <Route 
       path="/subpage" 
       children={({ match, ...rest }) => <Subpage {...rest} />} 
      /> 
     </Switch> 
    </FadeTransition> 
</TransitionGroup>