press-plus/common/page-animation/mixin.js

易用的跨端组件库

import './index.scss';

const mode = 'slide-in-right';


export const pageAnimationMixin = {
  onHide() {
    const pageClass = document.querySelector('uni-app')?.classList;
    pageClass?.add(`page-${mode}--out`);

    setTimeout(() => {
      pageClass?.remove(`page-${mode}--out`);
      pageClass?.add(`page-${mode}--in`);

      setTimeout(() => {
        pageClass?.remove('back');
        pageClass?.remove(`page-${mode}--in`);
      }, 300);
    }, 300);
  },
  // onLoad() {
  //   const pageClass = document.querySelector('uni-app')?.classList;
  //   pageClass?.remove(`page-${mode}--out`);
  //   pageClass?.add(`page-${mode}--in`);
  //   setTimeout(() => {
  //     pageClass?.remove('back');
  //     pageClass?.remove(`page-${mode}--in`);
  //   }, 200);
  // },
  onUnload() {
    const pageClass = document.querySelector('uni-app')?.classList;
    pageClass?.add('back');
    pageClass?.add(`page-${mode}--out`);

    setTimeout(() => {
      pageClass?.remove(`page-${mode}--out`);
      pageClass?.add(`page-${mode}--in`);

      setTimeout(() => {
        pageClass?.remove('back');
        pageClass?.remove(`page-${mode}--in`);
      }, 300);
    }, 250);
  },
};