There is a problem with the custom navigation animation

Ionic Framework Ionic React
1

I wrote an animation for forward and backward navigation, forward navigation works fine, but I have problems with backward animation, I move the page through translateX and add opacity
, but as you can see in the picture for some reason there is a black background in the background during the animation, but after the animation is hung, the page is shown normally, I thought the problem in translate, but no, if leave only opacity, the problem remains, please tell me what the problem might be

Снимок экрана от 2024-07-05 19-57-10
Снимок экрана от 2024-07-05 19-57-10382×574 6.34 KB

My code

App.tsx

setupIonicReact({
  navAnimation:navPageAnimate
})

const App: React.FC = () => {
  return (
    <IonApp>
      <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/tabs">
          <Tabs/>
        </Route>
        <Route path='/a'>
          <A/>
        </Route>
        <Route path='/b'>
          <B/>
        </Route>
        <Route exact path="/">
          <Redirect to="/tabs/tab2" />
        </Route>
      </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  )
}

export default App

A page

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, useIonRouter } from '@ionic/react'


const A = () =>{
    const navq = useIonRouter()
    return (
    <IonPage>
        <IonHeader>
            <IonToolbar>
                <IonTitle>A</IonTitle>
            </IonToolbar>
        </IonHeader>
        <IonContent>
            <div onClick={()=>navq.push('/b',"forward")}>GO B</div>
        </IonContent>
    </IonPage>
    )
}

export default A

B page

import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar, useIonRouter } from '@ionic/react'


const B = () =>{
    const navq = useIonRouter()
    return (
    <IonPage>
        <IonHeader>
            <IonToolbar>
                <IonTitle>B</IonTitle>
                <IonButtons slot='start'>
                    <IonBackButton defaultHref='/a'></IonBackButton>
                </IonButtons>
            </IonToolbar>
        </IonHeader>
        <IonContent>
           B
        </IonContent>
    </IonPage>
    )
}

export default B

CUSTOM ANIMATION FUNCTION

import { createAnimation } from "@ionic/react"

function navPageAnimate(baseEl: any, opts?: any) {
  const animation = createAnimation()
  if (opts.direction == "forward") {
    const leaveMainPageAnimation = createAnimation()
      .addElement(opts?.leavingEl)
      .duration(200)
      .fromTo("opacity", "1", "1")
      .fromTo("transform", "translateX(0px)", "translateX(-100px)")
      .beforeAddClass("overlay")
      .afterRemoveClass("overlay")
    const enterPageAnimation = createAnimation()
      .addElement(opts?.enteringEl)
      .duration(200)
      .fromTo("opacity", "1", "1")
      .fromTo("transform", "translateX(300px)", "translateX(0px)")

    return animation.addAnimation([enterPageAnimation, leaveMainPageAnimation])
  } else if (opts.direction == "back") {
    const leaveChildPageAnimation = createAnimation()
      .addElement(opts?.leavingEl)
      .duration(1200)
      .easing("ease-out")
      .fromTo("opacity", "1", "0")
      .fromTo("transform", "translateX(0px)", "translateX(300px)")

    return createAnimation().addAnimation([leaveChildPageAnimation])
  } else return createAnimation()
}

export { navPageAnimate }

versions

  "dependencies": {
    "@capacitor/android": "6.1.0",
    "@capacitor/app": "6.0.0",
    "@capacitor/core": "6.1.0",
    "@capacitor/haptics": "6.0.0",
    "@capacitor/keyboard": "6.0.1",
    "@capacitor/status-bar": "6.0.0",
    "@ionic/react": "^8.0.0",
    "@ionic/react-router": "^8.0.0",
    "@types/react-router": "^5.1.20",
    "@types/react-router-dom": "^5.3.3",
    "ionicons": "^7.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4",
    "swiper": "^11.1.4",
    "zustand": "^4.5.4"
  },
2

I figured out the problem, I had to change opacity at the page where I was going back, maybe it would help someone later

else if(opts.direction == "back"){
    const enterAnimation = createAnimation()
    .addElement(opts?.enteringEl)
    .duration(100)
    .easing("ease-in")
    .fromTo("opacity", 0.9, 1)
    const leaveChildPageAnimation = createAnimation()
      .addElement(opts?.leavingEl)
      .duration(300)
      .easing("ease-out")
      .fromTo("opacity", "1", "0")
      .fromTo("transform", "translateX(0px)", "translateX(300px)")
   
    //  
      

      return animation.addAnimation([enterAnimation,leaveChildPageAnimation])
  }