Vue navigation transitions

Ionic Framework
1

Does anyone have a working Vue example of Ionic native navigation transitions (e.g. forward slide), both declaratively and programmatically? I have not been able to get them to work.

2

are you using the IonicVueRouter

import { IonicVueRouter } from "@ionic/vue";
Vue.use(IonicVueRouter);
3

Yes, I’m using IonicVueRouter. I’d like to see an actual working example, then I could compare with what I have to figure out what’s different.

4

Where is your code? You should get the navigation animations by default

5

I know I should get them by default, that’s why I’m puzzled. I’ll post some code later.

6

Something i this

in template

  <ion-modal
    :is-open="isOpenRef"
    :showBackdrop="false"
    :animated="true"
    :enterAnimation="enterAnimation"

    :leaveAnimation="leaveAnimation"
    @onDidDismiss="
      setOpen(false);
      setPopUpOnceArr(popUpOnce, name);
    "
  >
</ion-modal

setup(){
  
const enterAnimation = (baseEl) => {
      console.log("baseEl", baseEl);
            const backdropAnimation = createAnimation()
        .addElement(baseEl.querySelector("ion-backdrop"))
        .fromTo("opacity", "0.01", "0.5"); 

      const wrapperAnimation = createAnimation()
        .addElement(baseEl.querySelector(".modal-wrapper"))
        .fromTo("transform", "translatey(-500px)", "translatey(0px)")
        .fromTo("opacity", "1", "1");

      return createAnimation()
        .addElement(baseEl)
        .easing("ease-in-out")
        .duration(200)
        .addAnimation([wrapperAnimation /* backdropAnimation */]);
    };

    const leaveAnimation = (baseEl) => {
      return enterAnimation(baseEl).direction("reverse");
    };

return{enterAnimation, leaveAnimation}
}