使用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>