packages/mip/src/components/mip-shell/switchPage.js
function forwardTransitionAndCreate (shell, options) {
  let {sourcePageId, targetPageId, targetPageMeta, onComplete} = options
  let loading = getLoading(targetPageMeta, {transitionContainsHeader: shell.transitionContainsHeader})
  loading.classList.add('slide-enter', 'slide-enter-active')
  css(loading, 'display', 'block')

  let headerLogoTitle
  let fadeHeader
  if (!shell.transitionContainsHeader) {
    headerLogoTitle = document.querySelector('.mip-shell-header-wrapper .mip-shell-header-logo-title')
    headerLogoTitle && headerLogoTitle.classList.add('fade-out')
    fadeHeader = getFadeHeader(targetPageMeta)
    fadeHeader.classList.add('fade-enter', 'fade-enter-active')
    css(fadeHeader, 'display', 'block')
  }

  whenTransitionEnds(loading, 'transition', () => {
    loading.classList.remove('slide-enter-to', 'slide-enter-active')
    if (!shell.transitionContainsHeader) {
      fadeHeader.classList.remove('fade-enter-to', 'fade-enter-active')
    }

    hideAllIFrames()
    fixRootPageScroll(shell, {sourcePageId, targetPageId})
    onComplete && onComplete()

    let iframe = getIFrame(targetPageId)
    css(iframe, 'z-index', activeZIndex++)

    shell.afterSwitchPage(options)
  })

  nextFrame(() => {
    loading.classList.add('slide-enter-to')
    loading.classList.remove('slide-enter')
    if (!shell.transitionContainsHeader) {
      fadeHeader.classList.add('fade-enter-to')
      fadeHeader.classList.remove('fade-enter')
    }
  })
}
function forwardTransitionAndCreate (shell, options) {
  let {sourcePageId, targetPageId, targetPageMeta, onComplete} = options
  let loading = getLoading(targetPageMeta, {transitionContainsHeader: shell.transitionContainsHeader})
  loading.classList.add('slide-enter', 'slide-enter-active')
  css(loading, 'display', 'block')

  let headerLogoTitle
  let fadeHeader
  if (!shell.transitionContainsHeader) {
    headerLogoTitle = document.querySelector('.mip-shell-header-wrapper .mip-shell-header-logo-title')
    headerLogoTitle && headerLogoTitle.classList.add('fade-out')
    fadeHeader = getFadeHeader(targetPageMeta)
    fadeHeader.classList.add('fade-enter', 'fade-enter-active')
    css(fadeHeader, 'display', 'block')
  }

  whenTransitionEnds(loading, 'transition', () => {
    loading.classList.remove('slide-enter-to', 'slide-enter-active')
    if (!shell.transitionContainsHeader) {
      fadeHeader.classList.remove('fade-enter-to', 'fade-enter-active')
    }

    hideAllIFrames()
    fixRootPageScroll(shell, {sourcePageId, targetPageId})
    onComplete && onComplete()

    let iframe = getIFrame(targetPageId)
    css(iframe, 'z-index', activeZIndex++)

    shell.afterSwitchPage(options)
  })

  nextFrame(() => {
    loading.classList.add('slide-enter-to')
    loading.classList.remove('slide-enter')
    if (!shell.transitionContainsHeader) {
      fadeHeader.classList.add('fade-enter-to')
      fadeHeader.classList.remove('fade-enter')
    }
  })
}
function forwardTransitionAndCreate ( shell , options ) { let { sourcePageId , targetPageId , targetPageMeta , onComplete } = options let loading = getLoading ( targetPageMeta , { transitionContainsHeader : shell . transitionContainsHeader } ) loading . classList . add ( 'slide-enter' , 'slide-enter-active' ) css ( loading , 'display' , 'block' ) let headerLogoTitle let fadeHeader if ( ! shell . transitionContainsHeader ) { headerLogoTitle = document . querySelector ( '.mip-shell-header-wrapper .mip-shell-header-logo-title' ) headerLogoTitle && headerLogoTitle . classList . add ( 'fade-out' ) fadeHeader = getFadeHeader ( targetPageMeta ) fadeHeader . classList . add ( 'fade-enter' , 'fade-enter-active' ) css ( fadeHeader , 'display' , 'block' ) } whenTransitionEnds ( loading , 'transition' , ( ) => { loading . classList . remove ( 'slide-enter-to' , 'slide-enter-active' ) if ( ! shell . transitionContainsHeader ) { fadeHeader . classList . remove ( 'fade-enter-to' , 'fade-enter-active' ) } hideAllIFrames ( ) fixRootPageScroll ( shell , { sourcePageId , targetPageId } ) onComplete && onComplete ( ) let iframe = getIFrame ( targetPageId ) css ( iframe , 'z-index' , activeZIndex ++ ) shell . afterSwitchPage ( options ) } ) nextFrame ( ( ) => { loading . classList . add ( 'slide-enter-to' ) loading . classList . remove ( 'slide-enter' ) if ( ! shell . transitionContainsHeader ) { fadeHeader . classList . add ( 'fade-enter-to' ) fadeHeader . classList . remove ( 'fade-enter' ) } } ) }
Forward transition and create new iframe

@param {Object} shell shell instance
@param {Object} options
@param {string} options.targetPageId targetPageId
@param {Object} options.targetPageMeta pageMeta of target page
@param {string} options.sourcePageId sourcePageId
@param {Object} options.sourcePageMeta pageMeta of source page
@param {boolean} options.newPage whether a new iframe should be created (true)
@param {boolean} options.isForward whether transition direction is forward (true)
@param {Function} options.onComplete complete callback
Forward transition and create new iframe