Ionic 5 react enterAnimation

@divyanshugarg36 wrote:

Hey, I was working around with the same issue and I was able to make leaveAnimation work (which is reverse of enterAnimation) but the thing was that when I used enterAnimation it didn’t work out as I wanted, In brief, the popover DOM existed but popover itself was not visible because of some opacity thing but not able to find it in DOM

IONIC REACT with TYPESCRIPT

<IonPopover
        animated
        ref={popref}
        mode="ios"
        isOpen={showPopover} // for toggling popup bool
        event={popoverEvent}
        keyboardClose
        showBackdrop={false}
        // baseEl.childNodes[1].childNodes[1].childNodes[0]

        // THIS ONE DOESNT WORK
        // when we comment this one i can see a fadein animation which uses opacity....
        enterAnimation={(baseEl, opts) => { 
          return createAnimation()
            .delay(1000)
            .duration(1000)
            .addAnimation([
              createAnimation()
                .addElement(baseEl.childNodes[1])
                .keyframes([
                  { offset: 0, transform: 'scale(0.2)', opacity: 1 },
                  { offset: 1, transform: 'scale(1)', opacity: 1 }
                ])
            ]);
        }}

        // THIS WORKS WHEN POPUP CLOSES
        leaveAnimation={(baseEl) => {
          return createAnimation()
            .duration(500)
            .addAnimation([
              createAnimation()
                .addElement(baseEl.childNodes[1].childNodes[1])
                .keyframes([
                  { offset: 0, transform: 'scale(1)' },
                  { offset: 1, transform: 'scale(0.2)' }
                ])
            ]);
        }}
        onDidDismiss={() => setShowPopover(false)}
        {...popOverProps}
      >
        {content} // this is the place where i put the content inside popover
      </IonPopover>

I think there is a preexisting enterAnimation in popover which is conflicting with this one.
What can be done to fix it? Please help!!
Thanks

Posts: 1

Participants: 1

Read full topic