Ionic React popover animation

Ionic Framework
1

Hi, I am making a IOS app using Ionic 4 and React. I want to animate my popover ( https://ionicframework.com/docs/api/popover ) using enterAnimation attribute, but couldn’t make it work. Can anyone please provide any example of popover animation with enterAnimation using Ionic 4 and React? There are some examples of the popover animation in Angular out there, but couldn’t find any React example.

2

What have you tried so far? Do you have an example?

3

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 :smile: