javascript 反应页面转换（假设反应路由器v4）

Posted 2021-05-04

.pageNavigation-enter {
  opacity: 0.01;

  &.pageNavigation-enter-active {
    opacity: 1;
    transition: opacity 0.3s ease-in;
  }
}

.pageNavigation-exit {
  opacity: 1;

  &.pageNavigation-exit-active {
    opacity: 0.01;
    transition: opacity 0.2s ease-in;
  }
}

import React from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

class TransitionHandler extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.location.pathname === window.location.pathname;
  }

  render() {
    const {children} = this.props;

    return (
      <div className="transition-container">
        {children}
      </div>
    );
  }
}

const TemplateWrapper = ({ children }) => {
  return (
    <TransitionGroup>
      <CSSTransition
      key={location.pathname}
      classNames="pageNavigation"
      timeout={{ enter: 300, exit: 200 }}
      >
        <TransitionHandler location={location}>
          <main>
            {children()}
          </main>
        </TransitionHandler>
      </CSSTransition>
    </TransitionGroup>
  );
}