分享一个自己实现的转场写法

[zjxpcyc]

我是在 v4 版本上写的。但是估计 v5 可能需要单独封装一个 layout。

// 需要用到一个 lib
yarn add react-transition-group

首先写一个 PageTransition 组件, 代码如下:

// 我用的 umi2, umi3 的导入跟此处不同
import withRouter from 'umi/withRouter';
import { CSSTransition, SwitchTransition } from 'react-transition-group';
import styles from './style.less';

export default withRouter((props) => {
  const currentURL = props.location.pathname + props.location.search

  return (
    <SwitchTransition>
      <CSSTransition
        key={currentURL}
        addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
        classNames={{
          enter: styles['page-fade-enter'],
          enterActive: styles['page-fade-enter-active'],
          exit: styles['page-fade-exit'],
          exitActive: styles['page-fade-exit-active']
        }}
      >
        <div>
          {props.children}
        </div>
      </CSSTransition>
    </SwitchTransition>
  );
})

样式文件 style.less 如下:

.page-fade-enter {
  opacity: 0;
  transform: translateY(10%);
}
.page-fade-enter-active {
  opacity: 1;
  transform: translateY(0%);
}
.page-fade-exit {
  opacity: 1;
  transform: translateY(0%);
}
.page-fade-exit-active {
  opacity: 0;
  transform: translateY(10%);
}
.page-fade-enter-active,
.page-fade-exit-active {
  transition: opacity 450ms, transform 450ms;
}

剩下就是直接使用了, 找到 BasicLayout 组件, 直接修改 ProLayout 子组件即可，类似如下代码:

<ProLayout  ...>
      <PageTransition>
        <Authorized authority={authorized.authority} noMatch={noMatch}>
          {children}
        </Authorized>
      </PageTransition>
</ProLayout>