Stop modal close animation

Ionic Framework Ionic Vue
10

I can think of 2 approaches:

  1. Use a document.querySelector:
let routerOutlet = document.querySelector('ion-router-outlet');
routerOutlet.animated = false;
this.$router.push(...);
routerOutlet.animated = true;

Just make sure you are selecting the correct router outlet if you have an app with multiple ion-router-outlet instances.

  1. Use a ref:

In App.vue:

<template>
  <ion-app>
    <ion-router-outlet ref="routerOutlet"></ion-router-outlet>
  </ion-app>
</template>

<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const routerOutlet = ref();
    return { routerOutlet }
  }
});

Depending on your application setup, you will need to find a way to pass this ref to your modal component.

As a quick workaround, I would probably try the first approach and see if that works.

1 Like