Method handleViewTransition

core/src/components/modal/modal.tsx:1194–1253

()

  }

  private handleViewTransition() {
    // Only run view transitions when the modal is presented
    if (!this.presented) {
      return;
    }

    const isPortrait = window.innerWidth < 768;

    // Only transition if view state actually changed
    if (this.currentViewIsPortrait === isPortrait) {
      return;
    }

    // Cancel any ongoing transition animation
    if (this.viewTransitionAnimation) {
      this.viewTransitionAnimation.destroy();
      this.viewTransitionAnimation = undefined;
    }

    const { presentingElement } = this;
    if (!presentingElement) {
      return;
    }

    // Create transition animation
    let transitionAnimation: Animation;
    if (this.currentViewIsPortrait && !isPortrait) {
      // Portrait to landscape transition
      transitionAnimation = portraitToLandscapeTransition(this.el, {
        presentingEl: presentingElement,
        currentBreakpoint: this.currentBreakpoint,
        backdropBreakpoint: this.backdropBreakpoint,
        expandToScroll: this.expandToScroll,
      });
    } else {
      // Landscape to portrait transition
      transitionAnimation = landscapeToPortraitTransition(this.el, {
        presentingEl: presentingElement,
        currentBreakpoint: this.currentBreakpoint,
        backdropBreakpoint: this.backdropBreakpoint,
        expandToScroll: this.expandToScroll,
      });
    }

    // Update state and play animation
    this.currentViewIsPortrait = isPortrait;
    this.viewTransitionAnimation = transitionAnimation;

    transitionAnimation.play().then(() => {
      this.viewTransitionAnimation = undefined;

      // Wait for a layout pass after the transition so getBoundingClientRect()
      // in getPositionBasedSafeAreaConfig() reflects the new dimensions.
      raf(() => this.updateSafeAreaOverrides());

      // After orientation transition, recreate the swipe-to-close gesture
      // with updated animation that reflects the new presenting element state
      this.reinitSwipeToClose();