press-plus/common/page-animation/index.ts

易用的跨端组件库

import { consoleInfo } from 't-comm/es/log/log';
// #ifdef H5
import './slide-in-right.scss';
// #endif
export type TMode = 'fade-in' | 'slide-in-right' | 'slide-in-left' | 'slide-in-top' | 'slide-in-bottom' | 'zoom-out';

export type NavType = 'push' | 'replace' | 'back' | '';

export interface IOptions {
  mode?: TMode;
  duration?: number;
  router: any;
  log?: boolean;
  selector?: string;
}


export const navigateData = {
  NAV_TYPE: '',
  setNavType(navType: NavType) {
    this.NAV_TYPE = navType;
  },
  getNavType() {
    return this.NAV_TYPE;
  },
};


const navigateMode = {
  push: 'slide-in-right',
  replace: 'slide-in-right',
  back: 'slide-in-right',
  '': '',
};


export const pageAnimation = (options: IOptions = {
  mode: 'slide-in-right',
  duration: 300,
  router: {},

  log: false,
  selector: 'uni-app',
}) => {
  const { router, duration = 300, log = false, selector = 'uni-app' } = options;
  let pageClass: DOMTokenList | undefined;

  const animate: {
    mode: TMode | null;
    duration: number;
  } = { mode: null, duration };

  const timers: { before: any, after: any } = { before: 0, after: 0 };

  router.beforeEach((to: any, from: any, next: Function) => {
    const navType = navigateData.getNavType() as NavType;
    consoleInfo(log, 'navType', navType);
    consoleInfo(log, 'router', to, from, next);


    clearTimeout(timers.before);
    clearTimeout(timers.after);

    pageClass = document.querySelector(selector)?.classList;
    const navMode = navigateMode[navType] as TMode;

    if (!pageClass || !navMode) return next();
    if (navMode) {
      animate.mode = navMode;
      pageClass.remove('back', `page-${animate.mode}--out`, `page-${animate.mode}--in`);
      const className = `page-${animate.mode}--out`;
      pageClass.add(className);
      // $app.style = `--redirect-duration: ${animate.duration}ms`;

      if (navType === 'back') {
        pageClass.add('back');
      }

      timers.before = setTimeout(() => {
        if (pageClass) {
          pageClass.remove(className);
        }
        next();
      }, animate.duration - 50); // 减去 50，不然会闪动
    }
  });

  router.afterEach(() => {
    if (!animate.mode || !pageClass) return;
    clearTimeout(timers.after);

    const className = `page-${animate.mode}--in`;
    pageClass.add(className);

    timers.after = setTimeout(() => {
      if (pageClass) {
        pageClass.remove(className);
        pageClass.remove('back');
      }
    }, animate.duration);

    navigateData.setNavType('');
    animate.mode = null;
  });
};


export default pageAnimation;